title: Using window.history.pushState multiple times, for a URL with multiple /
body: <p>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</p>
  <pre><code>www.website.com/products/
  to
  www.website.com/products/category1
  </code></pre>
  <p>The user the gets presented with multiple subcategories, and when a user proceed to choose one of those, i want the URL go from:</p>
  <pre><code>www.website.com/products/category1
  to
  www.website.com/products/category1/subcategory1
  </code></pre>
  <p>For a illustration, see <a href="https://imgur.com/a/7fLU4" rel="nofollow noreferrer">this</a></p>
  <p>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.<br />
  In my first event handler i do:</p>
  <pre><code>window.history.pushState(null, null, jQuery(this).attr('category'));
  </code></pre>
  <p>and that gives me the correct address im looking for /products/category1/
  But when i then try to do:</p>
  <pre><code>window.history.pushState(null, null, jQuery(this).attr('category') + &quot;/&quot; + jQuery(this).attr('subcategory'));
  </code></pre>
  <p>It will simply just keep adding stuff to my URL, what exactly am i doing wrong here?</p>