Using window.history.pushState multiple times, for a URL with multiple /

Question

So I'm trying to achieve that when a user first chooses a category (from a list or something similar) the URL will go from

www.website.com/products/
to
www.website.com/products/category1

The user the gets presented with multiple subcategories, and when a user proceed to choose one of those, i want the URL go from:

www.website.com/products/category1
to
www.website.com/products/category1/subcategory1

For a illustration, see this

Regardless i have played around with the .pushState, and it works great for my category1, but when i press the subcategory1-2-3, it just keeps adding the stuff to the URL.
In my first event handler i do:

window.history.pushState(null, null, jQuery(this).attr('category'));

and that gives me the correct address im looking for /products/category1/ But when i then try to do:

window.history.pushState(null, null, jQuery(this).attr('category') + "/" + jQuery(this).attr('subcategory'));

It will simply just keep adding stuff to my URL, what exactly am i doing wrong here?