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-set="cat1" 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" data-set="cat1" 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" data-set="cat1" 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" data-set="cat1" 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" data-set="cat1" 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" data-set="cat1" 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" data-set="cat1" value="24" name="mycatname[]"><span class="control-indicator"></span>test1<span class="fltr_num">(5)</span>

        </label>
        <br>
        <label class="searchLabel control checkbox">
 ...

JavaScript

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

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