How to count a single specific tile in a grid with divs having the same class

Issue

We want to count the grid tiles like in the bottom example, but in a more efficient way. like if we want to add 100 grid tiles instead of 9

console.log("connected");
var clicks1 = 0,
  clicks2 = 0,
  clicks3 = 0,
  clicks4 = 0,
  clicks5 = 0,
  clicks6 = 0,
  clicks7 = 0,
  clicks8 = 0,
  clicks9 = 0,
  i = 0;
var clikcs = [clicks1, clicks2, clicks3, clicks4, clicks5, clicks6, clicks7, clicks8, clicks9];

$(".grid-item").click(function() {
  clicks1++;

  console.log("clicked " + clicks1);
  i = clicks1 % 3;

  if (i === 1) {
    $(this).removeClass("slika1")
    $(this).removeClass("slika3")
    $(this).addClass("slika2")
  } else if (i === 2) {
    $(this).removeClass("slika2")
    $(this).removeClass("slika1")
    $(this).addClass("slika3")
  } else {
    $(this).removeClass("slika3")
    $(this).removeClass("slika2")
    $(this).addClass("slika1")
  }
})

// bottom example

/*
$("#grid1").click(function(){
    clicks1++;
    
    // console.log("clicked "+ clicks);
     i=clicks1%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})

$("#grid2").click(function(){
    clicks2++;
    
    // console.log("clicked "+ clicks);
     i=clicks2%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid3").click(function(){
    clicks3++;
    
    // console.log("clicked "+ clicks);
     i=clicks3%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid4").click(function(){
    clicks4++;
    
    // console.log("clicked "+ clicks);
     i=clicks4%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid5").click(function(){
    clicks5++;
    
    // console.log("clicked "+ clicks);
     i=clicks5%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid6").click(function(){
    clicks6++;
    
    // console.log("clicked "+ clicks);
     i=clicks6%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid7").click(function(){
    clicks7++;
    
    // console.log("clicked "+ clicks);
     i=clicks7%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid8").click(function(){
    clicks8++;
    
    // console.log("clicked "+ clicks);
     i=clicks8%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})
$("#grid9").click(function(){
    clicks9++;
    
    // console.log("clicked "+ clicks);
     i=clicks9%3;

     if(i===1){
        $(this).removeClass("slika1")
        $(this).removeClass("slika3")
        $(this).addClass("slika2") 
     }else if(i===2){
        $(this).removeClass("slika2")
        $(this).removeClass("slika1")
        $(this).addClass("slika3") 
     }else{
        $(this).removeClass("slika3")
        $(this).removeClass("slika2")
        $(this).addClass("slika1") 
     }
})*/

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.main_container {
  width: 60%;
  height: 80%;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template-columns: auto auto auto;
  position: absolute;
}

.grid-item {
  background-attachment: fixed;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  background-size: cover;
}

.slika1 {
  background-image: url("/images/narava2.jpg");
}

.slika2 {
  background-image: url("/images/cat.jpg");
}

.slika3 {
  background-image: url("/images/food-spread.jpg");
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <title>puzzle</title>
</head>

<body>
  <div class="main_container">
    <div id="grid1" class="grid-item slika1">1</div>
    <div id="grid2" class="grid-item slika1">2</div>
    <div id="grid3" class="grid-item slika1">3</div>
    <div id="grid4" class="grid-item slika1">4</div>
    <div id="grid5" class="grid-item slika1">5</div>
    <div id="grid6" class="grid-item slika1">6</div>
    <div id="grid7" class="grid-item slika1">7</div>
    <div id="grid8" class="grid-item slika1">8</div>
    <div id="grid9" class="grid-item slika1">9</div>
  </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="js/script.js" type="text/javascript"></script>
</body>

</html>

The problem is that the variable that is counting the clicks is counted for every click in the div instead of for the specific tile. We tried a lot of things, but we couldn't figure it out, sadly.

Solution

You could always use the html dataset to hold an element state. I also wrote a function which dynamically creates the grid items and appends it to the container. Hopefully this demo makes it clear one way to accomplish something like this 👍 If you have any questions about my demo always feel free to ask for clarification.

const get = query => [...document.querySelectorAll(query)];
const STARTING_GRID_COUNT = 9;
const gridContainer = get(".grid-container")[0];

const gridItemClicked = e => {
  const data = e.target.dataset;
  const gridNumber = data.count;
  const timesClicked = Number(data.timesClicked) + 1;
  e.target.dataset.timesClicked = timesClicked;
  console.log(`grid item ${gridNumber} clicked ${timesClicked} times`);
};

let gridItemCount = 0;
const createGridItem = () => {
  const gridItem = document.createElement("div");
  gridItem.classList.add("grid-item");
  gridItem.dataset.count = gridItemCount;
  gridItem.dataset.timesClicked = 0;
  gridItem.textContent = gridItemCount;
  gridItem.addEventListener(
    "click",
    gridItemClicked
  );
  gridContainer.appendChild(gridItem);
  gridItemCount++;
};

for (let i = 0; i < STARTING_GRID_COUNT; i++) {
  createGridItem();
}

get("button")[0].addEventListener("click", createGridItem);

.grid-container {
  display: inline-grid;
  --size: 30px;
  grid-template-columns:
    repeat(3, var(--size));
  border: 1px solid black;
}

.grid-container .grid-item {
  height: var(--size);
  width: var(--size);
  display: grid; place-items: center;
}

.grid-container .grid-item:hover {
  background: lightblue;
}

<div class="grid-container">
</div>
<button>Add Grid Item</button>

Answered By - async await