JSFiddle - React, Tailwind, and code Playground

by Nechifor Vasile

HTML

<p>Click 3 squares...</p>
<span>$</span>

<br>

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

CSS

div {
    width: 60px;
    height: 60px;
    margin: 5px;
    padding: 20px;
    float: left;
    background: green;
    cursor:pointer;
    color: #fff;
    text-align: center;
  }
  p {
    color: red;
  }

JavaScript

$('div').click(function () {
    var classes = ['first_click','second_click','third_click'];
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];   
    if ($.inArray(this.className, classes)+1 == 2){
       alert("second_click");        
    }
    if ($(this).hasClass('third_click')){
       alert("third click");
          $(this).css({
            background: "red",
            cursor: "auto",
         });
    }
    
    $(this).append($.inArray(this.className, classes)+1);
    $( "span" ).append( $.inArray(this.className, classes)+1);
});