PHP将表拆分为较小的表

Can someone help me with splitting a PHP Table into smaller collapsible tables?
I'm currently running this query to get my results from a database:

$querytasks = 
  "SELECT *
    FROM tasks
    INNER JOIN usercontract on usercontract.Contract = tasks.contract
    INNER JOIN users on users.ID = usercontract.UserID
    WHERE (users.Username='$Username' AND users.ID = usercontract.UserID)
    ORDER BY status, tasks.contract DESC, itemgroup DESC, item DESC";
$statement2 = $dbh->prepare($querytasks);
$statement2->execute();
$tasks = $statement2->fetchAll();
$statement2->closeCursor();

I'm then using a foreach loop to create a row in a table for each result from this query:

<table id="mytable" class="fixed_header">
  <thead class="tbl-header" style="background-color: #007BFF;">
    <tr >
      <th>Contract</th>
      <th>Task Group</th>    
      <th>Task Description</th>
      <th>Assigned By</th>
      <th>Assigned To</th>
      <th>Status</th>    
      <th>Due Date</th>
      <th>ID</th>
      <th>Edit</th>
    </tr>
  </thead>

  <tbody class="tbl-content">
    <?php foreach ($tasks as $task) : ?>

    <tr style="display: none;">
      <td><?php echo $task['contract']; ?></td>
      <td><?php echo $task['itemgroup']; ?></td>
      <td><?php echo $task['item']; ?></td>
      <td><?php echo $task['assignedby']; ?></td>
      <td><?php echo $task['assignedto']; ?></td>
      <td><?php echo $task['status']; ?></td>
      <td><?php echo $task['due']; ?></td>
      <td><?php echo $task['id']; ?></td>
      <td><a class="btn btn-info edit"  aria-label="Settings" onclick="updateTask('<?php echo $task['contract']; ?>','<?php echo $task['itemgroup']; ?>','<?php echo $task['item']; ?>','<?php echo $task['assignedby']; ?>','<?php echo $task['assignedto']; ?>','<?php echo $task['status']; ?>','<?php echo $task['due']; ?>','<?php echo $task['id']; ?>')">
      <i class="fa fa-pencil-square-o" aria-hidden="true" ></i>
      </a> </td>
    </tr>
  </tbody> <?php endforeach; ?>
</table>

My table currently looks like this:

I would like it to look like this:

Where "Boarding point : Chanda Nagar" would instead be "Task Group : Early Warning Notice" and "Boarding point kphb" would be "Task Group : General Communications"

I believe it can be done with JavaScript or jQuery.