JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<h1>Find cell...</h1>
<h2>(Refresh site to start again.)</h2>

<table>
  <tbody>
    <tr>
      <td data-j="0" data-i="0">1</td>
      <td data-j="0" data-i="1">2</td>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
    </tr>
    <tr>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
    </tr>
    <tr>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
    </tr>
    <tr>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
    </tr>
    <tr>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
      <td data-j="1" data-i="1">4</td>
      <td data-j="1" data-i="0">3</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}

td {
  width: 50px;
  height: 50px;
  border: 2px solid #000000;
  background-color: #ffffff;
  color: black;
  text-align: center;
}

h2 {
  color: grey;
}

JavaScript

var correctJ = 1; // Cell #3
var correctI = 0; // Cell #3

$("td").click(function() {
	if($(this).attr('data-j') == correctJ) {
  	$(this).css("background-color", "green");
  } else {
  	$(this).css("background-color", "red");
  }
});