JSFiddle - React, Tailwind, and code Playground

HTML

<table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Number</th>
        </tr>
      </thead>
      <tbody>
      <tbody class="labels">
        <tr>
          <td colspan="2">
            <label for="hide_show_btn">Click me!</label>
            <input type="checkbox" id="hide_show_btn">
          </td>
        </tr>
      </tbody>
      <tbody class="hidable">
        <tr>
          <td>Jack</td>
          <td>100</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>300</td>
        </tr>
      </tbody>
    </table>

CSS

table {
      width: 100%;
    }

    table,
    tr,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
      font-family: Arial;
    }

    .hidable {
      display: none;
    }

JavaScript

$(document).ready(function() {
  $('#hide_show_btn').click(function() {
    console.log($('.hide'));
    //$('.hide').toggle();
    $(this).parents().next('.hidable').toggle();
  });
});