JSFiddle - React, Tailwind, and code Playground

HTML

<p>Your breakfast order</p>
<div class="dd">
    <input type="checkbox" class="checkAll"/>Check All
    <input type="checkbox"/>Toast
    <input type="checkbox"/>Eggs
    <input type="checkbox"/>Bacon
</div>

<p>Your lunch order</p>
<div class="asdsad">
<input type="checkbox" class="checkAll"/>Check All
    <input type="checkbox"/>Salad
    <input type="checkbox"/>Pizza
    <input type="checkbox"/>Hot Dogs
</div>

JavaScript

$('.checkAll').click(function(event) {  //on click 
     var $boxes = $(this).closest('div').find('input[type="checkbox"]');  
     if(this.checked) { // check select status
         $boxes.each(function() { //loop through each checkbox
             this.checked = true;  //select all checkboxes                
         });
     }else{
         $boxes.each(function() { //loop through each checkbox
             this.checked = false; //deselect all checkboxes under the checkAll checkbox                      
         });         
     }
 });