JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mycategory" class="filter_acc_class uwpqsf_class togglecheck">
    	<h2 class="LabelPlaceHolder">Category</h2>

    <!-- Add controlall and data-boxid -->
    <label class="searchLabel control controlAll checkbox" data-boxid="wrap_id_cats">
        <input type="checkbox" class="chkcmfall" value="" name="mycatname[]" data-boxid="wrap_id_cats"><span class="control-indicator"></span>All</label>
    <div id="wrap_id_cats" class="wrap_acf togglecheck">
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="16" name="mycatname[]"><span class="control-indicator"></span>Bakery<span class="fltr_num">(12)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="18" name="mycatname[]"><span class="control-indicator"></span>Indulgences<span class="fltr_num">(12)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="17" name="mycatname[]"><span class="control-indicator"></span>Dairy<span class="fltr_num">(7)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="19" name="mycatname[]"><span class="control-indicator"></span>Meat<span class="fltr_num">(7)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="27" name="mycatname[]"><span class="control-indicator"></span>test4<span class="fltr_num">(7)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="24" name="mycatname[]"><span class="control-indicator"></span>test1<span class="fltr_num">(5)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
            <input type="checkbox" value="26" name="mycatname[]"><span...

JavaScript

jQuery(window).ready(function () {
	    //check ALl checkbox onClick
	    jQuery('body').on('click', '.chktaxoall,.chkcmfall', function (e, source) {
	        var all = $(this).is(":checked");
	        if (source != "code") {
	            $("input[type=checkbox]:not(this)").each(function () {
	                if ($(this).is(":checked") != all) $(this).trigger("click", "code");
	            });
	        }
	    });

	    jQuery('body').on('click', '.wrap_acf input:checkbox', function (e, source) {
	        var allChecked = $(".chkcmfall").is(":checked");
	        if (source != "code" && allChecked) {
	            $(".wrap_acf input:checkbox:not(this)").trigger("click", "code");
	            $(".chkcmfall").trigger("click", "code");
	        }
            else if (source != "code")
            {
                if ($(".wrap_acf input:checkbox:checked").length == $(".wrap_acf input:checkbox").length)
                    $(".chkcmfall").trigger("click", "code");
            }
	    })
	});