JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="sidebar1">

    <body class="twoColLiqLt">
      <div id="container">
        <div id="sidebar1">
          <h3>Parameters:</h3>
          <form id="form1" name="form1" method="post" action="">
            <label>
              <input type="checkbox" name="A" class="selector" />A</label>
            <label>
              <input type="checkbox" name="B" class="selector" />B</label>
            <label>
              <input type="checkbox" name="X" class="selector" />X</label>
            <label>
              <input type="checkbox" name="Y" class="selector" />Y</label>
            <label>
              <input type="checkbox" name="Z" class="selector" />Z</label>

          </form>

          <form id="form2" name="form2" method="post" action="">

            <label>
              <input type="checkbox" name="K" class="selector" />K</label>
            <label>
              <input type="checkbox" name="J" class="selector" />J</label>
            <label>
              <input type="checkbox" name="M" class="selector" />M</label>
            <label>
              <input type="checkbox" name="T" class="selector" />T</label>
            <label>
              <input type="checkbox" name="N" class="selector" />N</label>

          </form>
        </div>
      </div>

      <div id="mainContent">
        <h3 align="right">&nbsp;</h3>

        <div>
          <table width="200" border="1">
            <tr>
              <td>A</td>
              <td>&nbsp;</td>
              <td>M</td>
              <td>&nbsp;</td>
              <td>K</td>
              <td>J</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>B</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
             ...

CSS

.highlight {
  background: #9ac99d;
}

JavaScript

$('.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)
}