JSFiddle - React, Tailwind, and code Playground

HTML

<!-- while loop -->
<table>
<tr>
    <th>Figure</th>
    <th>Validate</th>
    <th>Approve</th>
    <th>Reject</th>
</tr>    


<tr>
    <td>1</td>
    <td><input type="checkbox" class="val" name="validate" checked disabled/></td>
    <td><input type="checkbox" class="app" name="approve"  checked disabled/></td>
    <td><input type="checkbox" class="rej" name="reject"   checked disabled/></td>
</tr>  

<tr>
    <td>2</td>
    <td><input type="checkbox" class="val" name="validate"/></td>
    <td><input type="checkbox" class="app" name="approve" /></td>
    <td><input type="checkbox" class="rej" name="reject"  /></td>
</tr> 
    


<tr>
<td>Select All</td>
<td><input type="checkbox" data-checkbox-name="val" class="selectall" /></td>
<td><input type="checkbox" data-checkbox-name="app" class="selectall" /></td>
<td><input type="checkbox" data-checkbox-name="rej" class="selectall" /></td><td></td>
</tr>

JavaScript

$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
        $(':checkbox[class='+ $(this).data('checkbox-name') + ']').trigger("change");
    });
    
});