JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<table id="gameBoard">
  <tr>
    <td class="white" id="a1"></td>
    <td class="white" id="a2"></td>
    <td class="white" id="a3"></td>
    <td class="white" id="a4"></td>
    <td class="white" id="a5"></td>
  </tr>
  <tr>
    <td class="white" id="b1"></td>
    <td class="white" id="b2"></td>
    <td class="white" id="b3"></td>
    <td class="white" id="b4"></td>
    <td class="white" id="b5"></td>
  </tr>
  <tr>
    <td class="white" id="c1"></td>
    <td class="white" id="c2"></td>
    <td class="white" id="c3"></td>
    <td class="white" id="c4"></td>
    <td class="white" id="c5"></td>
  </tr>
  <tr>
    <td class="white" id="d1"></td>
    <td class="white" id="d2"></td>
    <td class="white" id="d3"></td>
    <td class="white" id="d4"></td>
    <td class="white" id="d5"></td>
  </tr>
  <tr>
    <td class="white" id="e1"></td>
    <td class="white" id="e2"></td>
    <td class="white" id="e3"></td>
    <td class="white" id="e4"></td>
    <td class="white" id="e5"></td>
  </tr>
</table>

CSS

#gameBoard td {
  width: 21px;
  height: 21px;
  border-radius: 50%;
}

#gameBoard .white {
  background-color: white;
}

#gameBoard .black {
  background-color: black;
}

JavaScript

$(function() {
  var color = "white";
  $("td").click(function(event) {
    console.log("Click Event, current color: " + ($(this).hasClass("black") ? "black" : "white"));
    $(this).toggleClass("black white");
    color = $(this).hasClass("black") ? "black" : "white";
    console.log("Color set to: " + color);
    //update($(this).attr("id"), color);
  });
});