JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<div class="container">
    <div>0</div>
    <div>0</div>
    <div>0</div>

    <div>0</div>
    <div>0</div>
    <div>0</div>

    <div>0</div>
    <div>0</div>
    <div>0</div>

</div>

CSS

.container{
  width: 320px;
  display: flex;
  flex-wrap:wrap;
  background:#ffffff;
  align-content: center;
  grid-template-columns: auto;
}

.container > div {
  width: 100px;
  text-align: center;
  border: slategray solid 1px;
  cursor: pointer;
}

JavaScript

var divList = document.querySelector(".container").querySelectorAll("div");

for (i = 0; i < divList.length; i++) {
  divList[i].addEventListener("click", (e) => {
    var currentCount = parseInt( e.srcElement.innerHTML);
    e.srcElement.innerHTML = currentCount + 1;
  });
}