JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordian-group">
    <div>
    <input type="checkbox" class="parentcheckbox" value""/>
        <ul>
         <li> <input type="checkbox" value""/></li>
        <li> <input type="checkbox" value""/></li>
        <li> <input type="checkbox" value""/>
            <ul>
               <li> <input type="checkbox" value""/></li>
               <li> <input type="checkbox" value""/></li>
              <li> <input type="checkbox" value""/>
                    <ul>
                      <li> <input type="checkbox" value""/></li>
                    </ul>
                </li>
           </ul>
       </li>
	   </ul>
    </div>
     <div>
    <input type="checkbox" class="parentcheckbox" value""/>
        <ul>
         <li> <input type="checkbox" value""/></li>
        <li> <input type="checkbox" value""/></li>
        <li> <input type="checkbox" value""/>
            <ul>
               <li> <input type="checkbox" value""/></li>
               <li> <input type="checkbox" value""/></li>
              <li> <input type="checkbox" value""/>
                    <ul>
                      <li> <input type="checkbox" value""/></li>
                    </u>
                </li>
           </ul>
       </li>
    </div>
</div>

JavaScript

$(document).ready(function() {
	// Whenever the parent checkbox is checked/unchecked
	$(".parentcheckbox").change(function() {
		// save state of parent
		c = $(this).is(':checked');
		$(this).parent().find("input[type=checkbox]").each(function() {
			// set state of siblings
			$(this).attr('checked', c);
		});
	});
	
	// Update parent checkbox based on children
	$("input[type=checkbox]:not('.parentcheckbox')").change(function() {
		if ($(this).closest("div").find("input[type=checkbox]:not('.parentcheckbox')").not(':checked').length < 1) {
			$(this).closest("div").find(".parentcheckbox").attr('checked', true);
		} else {
			$(this).closest("div").find(".parentcheckbox").attr('checked', false);
		}
	});
});