JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<div id="checkboxdiv">
 
  <form id="form1" 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="7" class="selector" />7</label>
    <label>
            <input type="checkbox" name="7" class="selector" />7</label>

  </form>
 
  <form id="form2" 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="8" class="selector" />8</label>
    <label>
            <input type="checkbox" name="9" class="selector" />9</label>

  </form>
  
    
  <form id="form3" name="form3" method="post" action="">
    <label>
            <input type="checkbox" name="SelectAll" class="all" />All (for table3)</label>
    <label>
            <input type="checkbox" name="5" class="selector" />5</label>
    <label>
            <input type="checkbox" name="1" class="selector" />1</label>
    <label>
            <input type="checkbox" name="6" class="selector" />6</label>

  </form>
  
</div>

<div id="tablediv">
<p> Table1</p>
  <table class="tablea" id="tb1">

    <tbody>
      <tr>
        <td>2</td>
        <td>3</td>
        <td>5</td>
        <td>5</td>
        <td>7</td>
        <td>7</td>
        <td>5</td>
      </tr>
      <tr>
        <td>2</td>
         <td>2</td>
          <td>2</td>
           <td>3</td>
            <td>3</td> 
            <td>3</td>
            <td>2</td>
      </tr>
    </tbody>
  </table>
<p> Table2</p>

<table class="tablea" id="tb2">

    <tbody>
      <tr>
        <td>2</td>
        <td>3</td>
        <td>5</td>
        <td>5</td>
        <td>7</td>
    ...

CSS

.highlight {
  background: #9ac99d;
}

tr.border_bottom td {
  border-bottom: 1pt solid black;
}

.tablea td {
  padding: 6px;
  margin: 6px;
  border: 2px solid #ccc;
}

JavaScript

// JavaScript Document
$(document).ready(function() {

  $('.selector').each(function() {
    $(this).on('click', check);
  });
  $('.all').each(function() {
    $(this).on('click', all);
  });

  function all(event) {

    if ($(this).is(':checked')) {
      $("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
    } else {
      $("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
    }

    //$('.selector').prop("checked", this.name === "SelectAll");

    check(event);
  }

  function check(event) {
    var checked = $(".selector:checked").map(function() {
      return this.name
    }).get()
    $('td').removeClass("highlight").filter(function() {
      return $.inArray($(this).text(), checked) >= 0
    }).addClass("highlight")
    if ($(this).is(".selector"))
      $('.all').not(this).prop("checked", false)

  }



});