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() {
  var selected_td = $("#table td");
  var target_td = $("#targetTable td");
  $(selected_td).on("click", function() {
    var nthItem = $("#table td").index(this);
    target_td.removeClass("is-selected");
    if (nthItem === 0) {
      $("#targetTable td:nth-child(1)").addClass("is-selected");
    } else if (nthItem === 1) {
      $("#targetTable td:nth-child(2)").addClass("is-selected");
    } else if (nthItem === 2) {
      $("#targetTable td:nth-child(3)").addClass("is-selected");
    } else if (nthItem === 3) {
      $("#targetTable td:nth-child(4)").addClass("is-selected");
    } else if (nthItem === 4) {
      $("#targetTable td:nth-child(5)").addClass("is-selected");
    }
  });
});