JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

<table id="targetTable">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

CSS

table,
td,
th {
  border: 1px solid #595959;
  border-collapse: collapse;
}

td,
th {
  padding: 3px;
  width: 30px;
  height: 25px;
}

th {
  background: #f0e6cc;
}

td.is-selected {
  background: #caf8da;
}

.even {
  background: #fbf8f0;
}

.odd {
  background: #fefcf9;
}

JavaScript

$(function() {
  $("#table td").on("click", function() {
    var idx = $("#table td").index(this);
    $("#targetTable td").removeClass("is-selected").filter(function() {
      return $("#targetTable").find("td").index(this) == idx;
    }).addClass("is-selected");
  });
});