fix: square level update

public/index.js

@@ -7,33 +7,29 @@ document.addEventListener("DOMContentLoaded", function () {
     square.setAttribute("data-level", "0");
     squares.push(square);
     squaresContainer.appendChild(square);
-  }
+    square.addEventListener("click", function () {
+      const currentLevel = parseInt(square.getAttribute("data-level"));
+      increaseLevel(square, currentLevel);
+    });
 
-  let currentLevel = 0;
+    square.addEventListener("contextmenu", function (event) {
+      event.preventDefault();
+      const currentLevel = parseInt(square.getAttribute("data-level"));
+      decreaseLevel(square, currentLevel);
+    });
+  }
 
-  function increaseLevel() {
+  function increaseLevel(square, currentLevel) {
     if (currentLevel < 4) {
-      currentLevel++;
-      updateSquareLevel();
+      const newLevel = currentLevel + 1;
+      square.setAttribute("data-level", newLevel);
     }
   }
 
-  function decreaseLevel() {
+  function decreaseLevel(square, currentLevel) {
     if (currentLevel > 0) {
-      currentLevel--;
-      updateSquareLevel();
+      const newLevel = currentLevel - 1;
+      square.setAttribute("data-level", newLevel);
     }
   }
-
-  function updateSquareLevel() {
-    squares.forEach((square) => {
-      square.setAttribute("data-level", currentLevel);
-    });
-  }
-
-  squaresContainer.addEventListener("click", increaseLevel);
-  squaresContainer.addEventListener("contextmenu", function (event) {
-    event.preventDefault();
-    decreaseLevel();
-  });
 });