JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">1</div>
    
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>

CSS

.box{
    background-color: red;
    width: 40px;
    height: 40px;
    border: 1px solid black;
}

JavaScript

function Box(){
       //PRIVATE VAR
       this.$view;
       this.increaseCounter = function () {
           count++;
       };
       
       this.getCounter = function () {
           return count;
       }
        var count=0;
   }

   Box.prototype.move = function(){
         this.css({left:50});
   };

    Box.prototype.connectClick = function () {
         box.$view.on('click', this.click.bind(this));
    };

   Box.prototype.click= function(){
         this.increaseCounter();
           alert(this.getCounter());
    };

    //create new instances of box and assign or connect to the four HTML elements
   var boxes = $.find('.box');
   for(var i = 0; i < boxes.length;  i++) {
       var box = new Box();
       box.$view = $(boxes[i]);
       box.connectClick();
   }