JSFiddle - React, Tailwind, and code Playground

by justfeel

HTML

<ul class="product-categories">
  <li class="cat-item cat-item-16 cat-parent"><a href="#">Clothing</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#">Accessories</a></li>
      <li class="cat-item cat-item-18"><a href="#">Hoodies</a></li>
    </ul>
  </li>
  
<br>

<li class="cat-item cat-item-21"><a href="#">Test</a></li>
 <br> 
  <li class="cat-item cat-item-15 cat-parent"><a href="#">Uncategorized</a>
    <ul class="children">
      <li class="cat-item cat-item-39"><a href="#">Example</a></li>
    </ul>
  </li> 
</ul>

CSS

body{
width:180px;
}
a{
  text-decoration:none;
}


.selected{
  background-color:grey;
}

JavaScript 1.7

let cat = jQuery('[class^=cat-item]');
jQuery(cat).each(function() {
	
    jQuery('.cat-item a').click(function(){

      jQuery('li .cat-item a').addClass('selected');
    });
   
});