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 class="control-indicator"></span>test3<span class="fltr_num">(5)</span></label><br>
									<label class="searchLabel control checkbox"><input type="checkbox" value="25" name="mycatname[]"><span class="control-indicator"></span>test2<span...

JavaScript

jQuery(window).ready(function() {
		//check ALl checkbox onClick
		 jQuery('body').on('click', '.chktaxoall,.chkcmfall',function (e) {
				if(this.checked){
					var i = 0;
					var sList;
					 jQuery(this).closest('.togglecheck').find('input:checkbox').each(function () {
						var sThisVal = (this.checked ? "1" : "0");
						i++;
						if(sThisVal==0 && i>1){
							jQuery(this).trigger('click','bot');
						}
					});
				}
				else{
					jQuery(this).closest('.togglecheck').find('input:checkbox').prop('checked', this.checked);
				}
			});
		//IF ALL IS SELECTED but if a user clicks on a particular checkbox uncheck all except the one user checked
		
		jQuery('body').on('click', '.wrap_acf input:checkbox',function (e) {
		//if all is checked and someone unchecks a checkbox make all uncheck
			var thisParent=jQuery(this).parents('.uwpqsf_class').attr('id');
			var AllTicked =jQuery("#"+thisParent+" .chkcmfall").prop('checked');
			if(thisParent && AllTicked){
				jQuery("#"+thisParent+" .chkcmfall").prop('checked',false)
				//jQuery(this).trigger('click');
			}
		
	})
	
			
	});