HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one green squares demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    div.square {
      width: 60px; height: 60px; margin: 5px; float: left;
      background: green; border: 10px outset; cursor: pointer;
    }
    p { color: red; margin: 0; clear: left; padding-top: 12px; font-weight: bold; }
  </style>
</head>
<body>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <p>Click a green square...</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var n = 0;
    $("div.square").one("click", function() {
      var index = $("div.square").index(this);
      $(this).css({ borderStyle: "inset", cursor: "auto" });
      $("p").text("Div at index #" + index + " clicked. That's " + (++n) + " total clicks.");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery div.one('click') — green squares demo (Try It)