JSFiddle - React, Tailwind, and code Playground

HTML

<p>Please choose all the users whose group_id you want to replace with that of the uploaded file</p>
<br />

<form id="groupImportForm" action="<?php echo url_for('group_utilization/importGroupMarching') ?>" method="POST">
<table id="user_info">
  <thead>
    <th>User ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Date_Of_Birth</th>
    <th>Old Group_ID</th>
    <th>New Group_ID</th>
    <th>Update GroupID</th>
  </thead>
  <tbody>
    <?php foreach($userGroupData as $value): ?>
    <tr>
      <td><?php echo $value['user_id']; ?></td>
      <td><?php echo $value['last_name']; ?></td>
      <td><?php echo $value['first_name']; ?></td>
      <td><?php echo $value['date_of_birth']; ?></td>
      <td><?php echo $value['group_id_old']; ?></td>
      <td><?php echo !empty($value['group_id_new']) ? $value['group_id_new'] : ''; ?></td>
      <td><input type="checkbox" name="isReplaceGroupID[<?php echo $value['user_id']; ?>]" value="<?php echo $value['group_id_new']; ?>"></input></td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>
  <div id="checkbox">
    <input type="button" name="CheckAll" value="Check All"
    onclick="toggleCheckboxes(true)">
    <input type="button" name="UnCheckAll" value="Uncheck All"
    onclick="toggleCheckboxes(false)">

  </div>
  <div><input type="submit" value="Continue" /></div>
</form>
<br/>
<br/>

CSS

#user_info {
    border-collapse:collapse;
  }

  #user_info td, #user_info th {
    width:100px;
    border:1px solid #CACACA;
    padding:5px;  
  }

  #checkbox{
    padding:20px 0 20px 250px;
  }

JavaScript

function toggleCheckboxes(flag) {    
    var form = document.getElementById('groupImportForm');
    var inputs = form.elements;
    if(!inputs){
        //console.log("no inputs found");
        return;
    }
    if(!inputs.length){
        //console.log("only one elements, forcing into an array");
        inputs = new Array(inputs);        
    }
    
    for (var i = 0; i < inputs.length; i++) {  
      //console.log("checking input");
      if (inputs[i].type == "checkbox") {  
        inputs[i].checked = flag;
      }  
    }  
}

function toggleWithJquery(flag){
    $('#groupImportForm input:checkbox').attr('checked', flag);
}