JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
  <div class="section" data-category="gender">
    <button data-value="men">Men</button>
    <button data-value="women">Women</button>
  </div>
  <div class="section" data-category="colour">
    <button data-value="green">green</button>
    <button data-value="red">Red</button>
  </div>
</div>

CSS

.active { color: #C00; }

JavaScript

jQuery($ => {
  let $buttons = $('.section button').click(e => {
    e.preventDefault();
    $(e.target).toggleClass('active');
    let data = buildButtonDataObject();
    let querystring = new URLSearchParams(data).toString();

    localStorage.setItem('data', data);
    console.log(data);
    history.pushState(data, 'Page title here', querystring);
    console.log(querystring);
  });
});

let buildButtonDataObject = () => {
  let obj = {};
  $('.section:has(.active)').each((_, s) => obj[s.dataset.category] = $(s).find('button.active').map((_, b) => b.dataset.value).get());
  return obj;
}