JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container" id="ad">
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>   
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
  <div class="grid-item" ></div>
</div>

CSS

.grid-item {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 2px solid red;
  margin-bottom: 10px;
  margin-right: 10px;
}

JavaScript

let divs = document.querySelectorAll(".grid-item");

/* Remove all event listeners */
const removeListeners = () => {
	for (let j = 0; j < divs.length; j++) { 
    divs[j].removeEventListener("click", clickHandler);
  }
}

/* Click event listener */
const clickHandler = (e) => {
  e.currentTarget.style["background-color"] = "red";
  removeListeners();
}

/* Add event listeners */
for (let i = 0; i < divs.length; i++) {
	divs[i].addEventListener("click", clickHandler);
}