JSFiddle - React, Tailwind, and code Playground

by Jose A

HTML

<div class="js-score-player">
  <div class="btn-group">
    <input type="button">
    <input type="button">
    <input type="button">
  </div>
  <div class="btn-group">
    <input type="button">
    <input type="button">
    <input type="button">
  </div>
</div>
<hr/>
<h3>
Opponent's
</h3>
<div class="js-score-opponent">
  <div class="btn-group">
    <input type="button">
    <input type="button">
    <input type="button">
  </div>
  <div class="btn-group">
    <input type="button">
    <input type="button">
    <input type="button">
  </div>
</div>

CSS

.active{
  background-color: #03A9F4;
}

JavaScript

var a = [...Array(10).keys()].reverse();

[...document.querySelectorAll(".js-score-player .btn-group input[type='button']")].forEach((element, index) => {
element.addEventListener("click", () => {
  //alert(`This is row ${Math.floor(index/3)} column:  ${index%3}`);
  element.classList.toggle("active");
  colorOpponent(Math.floor(index/3), index%3, element.classList.contains("active"));
  
  });
});

function colorOpponent(row, col, isActive){

 document.querySelector(".js-score-opponent .btn-group:nth-child(${row}) input[type="button"]:nth-child("+col+")").toggle("active", isActive);
}