JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin-top: 81px; width: 200px; float: left; background: none repeat scroll 0% 0% rgb(255, 255, 255);" cxlass="searchbox">  
<form method="get" action="/" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input type="hidden" value="✓" name="utf8"></div>

        <div id="category" class="menuitem category clicked">
                <label id="search_Company1_is_true" for="search_Company1">Company1 </label>
        <input type="hidden" value="0" name="search[Company1_is_true]"><input type="checkbox" value="1" name="search[Company1_is_true]" id="search_Company1_is_true" checked="checked">
        <div class="counter">1</div>
        </div> 
        <div id="minimenu" class="someclass">
        <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>         <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>         <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div> 
        </div>
        <div class="menuitem category clicked">
        <label for="search_company2">company2</label>
        <input type="hidden" value="0" name="search[company2_is_true]"><input type="checkbox" value="1" name="search[company2_is_true]" id="search_company2_is_true" checked="checked">
        <div class="counter">1</div>
        </div>
 <div class="someclass">
        <div class="menuitem">
        </div>
</div>

    <input type="submit"...

CSS

.hidediv {display:none;}
table {font-family:verdana;font-size:11px;}
table td {text-align:center;height:30px;border-top:1px solid #CCCCCC;}
.menuitem input {position:absolute;
right:15px;
top:5px;}
.menuitem label {display:block;
float:left;
font-weight:bolder;
margin-left:20px;
margin-top:5px;}
.hidediv {display:none;}
.menuitem {width:200px;height:30px;position:relative;border:1px solid blue;}
.menuitem:hover {text-decoration:underline;cursor:pointer;}
.miniitem input {position:absolute;
right:14px;
top:1px;}
.miniitem label {font-size:11px;
margin-left:20px;}
.miniitem {height:20px;
position:relative;
width:200px;}

JavaScript

$.each($('div.category'), function () {

            var categoryDiv = $(this);
            var relativeMinimenu = categoryDiv.next();

            categoryDiv.toggle(function () {
                relativeMinimenu.removeClass('hidediv').addClass('someclass').show(200);
                categoryDiv.addClass('clicked').show(200);
                categoryDiv.find('input:checkbox').attr('checked', 'checked');
            }, function () {
                categoryDiv.removeClass('clicked').find('input:checkbox').prop("checked", false);
                relativeMinimenu.addClass('hidediv');
            });

        });
        
$(".category").click(function() {

    // find closest category parent div
    var $cat = $(this).closest(".category");

    // get checkbox within category, check length
    var len = $cat.find(":checkbox:checked").length;

    // update the div's counter
    $cat.find(".counter").text(len);
});