JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div>  <label>
      <input type="checkbox"  name="CheckAll" class="all" >
      All (All tables)</label>
</div>
<div>
  <form id="form1" data-checktable="tb1" name="form1" method="post" action="">
    <label>
      <input type="checkbox" name="SelectAll" class="all" >
      All (for table1)</label>
    <label>
      <input type="checkbox" name="2" class="selector">
      2</label>
    <label>
      <input type="checkbox" name="5" class="selector">
      5</label>
    <label>
      <input type="checkbox" name="7" class="selector" >
      7</label>
  </form>
  <form id="form2" data-checktable="tb2" name="form2" method="post" action="">
    <label>
      <input type="checkbox" name="SelectAll" class="all">
      All (for table2)</label>
    <label>
      <input type="checkbox" name="3" class="selector">
      3</label>
    <label>
      <input type="checkbox" name="5" class="selector">
      5</label>
    <label>
      <input type="checkbox" name="7" class="selector">
      7</label>
  </form>
  <form id="form3" data-checktable="tb3" name="form3" method="post" action="">
    <label>
      <input type="checkbox" name="SelectAll" class="all" >
      All (for table3)</label>
    <label>
      <input type="checkbox" name="2" class="selector" >
      2</label>
    <label>
      <input type="checkbox" name="3" class="selector" >
      3</label>
    <label>
      <input type="checkbox" name="7" class="selector" >
      7</label>
  </form>
</div>
<div>
  <p> Table1</p>
  <table class="table"  id="tb1">
    <tbody>
      <tr>
        <td dbval="2">2</td>
        <td dbval="3">3</td>
        <td dbval="5">5</td>
        <td dbval="5">5</td>
        <td dbval="7">7</td>
        <td dbval="7">7</td>
        <td dbval="5">5</td>
      </tr>
      <tr>
        <td dbval="2">2</td>
        <td dbval="2">2</td>
        <td dbval="2">2</td>
        <td dbval="3">3</td>
        <td dbval="3">3</td>
        <td...

CSS

.highlight {
	background: #9ac99d;
}
tr.border_bottom td {
	border-bottom: 1pt solid black;
}
table td {
	padding: 6px;
	margin: 6px;
	border: 2px solid #ccc;
}

JavaScript

$(".selector").on("change", function() {
  var parent = $(this).closest("form");

  $("#" + parent.data("checktable"))
    .find('[dbval="' + this.name + '"]')
    .toggleClass("highlight", $(this).is(":checked"));
  parent
    .find(".all")
    .prop(
      "checked",
      parent.find(".selector:checked").length === parent.find(".selector").length
    );
});

$(".all").on("change", function() {
  $(this).closest("form").find(".selector")
    .prop("checked", $(this).is(":checked"))
    .trigger("change");
});

$(".all:checked").each(function() {
  $(this).closest("form").find(".selector").prop("checked", true).trigger("change");
});

$(".selector").trigger("change");