JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clickme">
   <div id="clickme2">Add</div>
</div>

CSS

*{margin:0 auto; padding:0;}

#clickme {
    height:150px;
    width:150px;
    background-color:#999;
    display:block;
    text-align:center;
    line-height:150px;
    font-size:35px;
}   
#clickme2 {
    height:120px;
    width:120px;
    border:dashed thin #003;
}

JavaScript

$("#clickme, #clickme2").mouseover(function() {
    $(this).css("cursor", "pointer");
    $(this).css("color", "#CCC");       
})
$("#clickme, #clickme2").mouseout(function() {
    $(this).css("color", "#000");       
})

$("#clickme, #clickme2").click(function() {
    event.stopPropagation();
    click_event() 
})

var i = 1;
function click_event() {
    alert(i)
    i++;    
}