JSFiddle - React, Tailwind, and code Playground

by martyk

HTML

<div id="container1">
   <div id="1"></div>
</div> 

<div id="container2">
   <div id="2"></div>
</div>

CSS

div {
    width:20px;
    height:20px;
    border:1px solid black;
}
.selected {
    background: yellow;
}
.selectable {
    background: lightgreen;
}

JavaScript

$('#1').addClass('selected');
$('#2').addClass('selectable');

var $outerContainer = $('#container1').parent();
$outerContainer.on('click','.selected,.selectable', function(event) {
    if ($(event.target).is(".selected")) {
        alert('hi');
        console.log('clicked on .selected');
    } else {        // .selectable
        $('.selected', $outerContainer)
            .removeClass('selected')
            .addClass('selectable');
        $(event.target)
            .addClass('selected')
            .removeClass('selectable');
        console.log('clicked on .selectable');
    }
});