JSFiddle - React, Tailwind, and code Playground

HTML

<div class="check">
<input type="checkbox" class="all" /> Check/Uncheck all<br />

<input type="checkbox" /> 1<br />
<input type="checkbox" /> 2<br />
<input type="checkbox" /> 3<br />
<input type="checkbox" /> 4<br />
<input type="checkbox" /> 5<br />
<input type="checkbox" /> 6<br />
<input type="checkbox" /> 7
</div>
<br><br>
<div class="check">
<input type="checkbox" class="all" /> Check/Uncheck all <br />

<input type="checkbox" /> 1<br />
<input type="checkbox" /> 2<br />
<input type="checkbox" /> 3<br />
<input type="checkbox" /> 4<br />
<input type="checkbox" /> 5<br />
<input type="checkbox" /> 6<br />
<input type="checkbox" /> 7
</div>

JavaScript

$(document).ready(function(){ 
    $('.all').click(function() {
        var $checkboxes = $(this).parent().find('input[type=checkbox]');
        $checkboxes.prop('checked', $(this).is(':checked'));
    });     
});