JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<div id="divParent1" class="container">
    <div id="child1" class="box">
        Something Here
    </div>
    <div id="child2" class="box">
        Something Here
    </div>
    <div id="child3" class="box">
        Something Here
    </div>
    <div id="child4" class="box">
        Something Here
    </div>
    <div id="child5" class="box">
        Something Here
    </div>
</div>

CSS

.container{
 padding:5px;
 width: 100px; 
  margin:5px;  
    display:relative;
}


.box{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}

JavaScript

$('.box').click(function() {
    $(this).parent().find('.box').css('background-color', '#ffffff');
    $(this).css('background-color', '#ff0000');   
    
    e = e || event;
    $.lastClicked = e.target || e.srcElement;  
    $.lastClicked.bind('someFunction', function() {
        alert('go away!')
    });


    $.lastClicked.click(function(){
        $(this).trigger('someFunction');
    });    
});