JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
<li  class="open" data-level="1">
  <a href="javascript:;">Category</a>
     <ul class="submenu">
         <li class="open" data-level="2">Subcategory11</li>
         <li class="open"  data-level="2">Subcategory12</li>
    </ul>
</li>
<li  class="open" data-level="2">
  <a href="javascript:;">Category2</a>
     <ul class="submenu">
         <li class="open" data-level="2">Subcategory21</li>
         <li class="open"  data-level="2">Subcategory22</li>
    </ul>
</li>
</ul>

JavaScript

var actMenu = 0;
$('li.open').on("click",function(){

		$(this).addClass('act');
		console.log('data='+$(this).data('level'));

  	/* считаем сколько элементов активно */
		$('ul.menu').each(function () {
  		 actMenu=$(this).find('.act').length;
		});

	if (($(this).data('level')) < actMenu+1) {
 			$($('li.act'), $(this).parent()).removeClass('act');
 			$(this).addClass('act');
	}
});