JSFiddle - React, Tailwind, and code Playground

by learner73

HTML

<div class="content" id="one">
    <p>Click Me</p>
</div>
<div class="content" id="two">
    <p>Another Click Me</p>
</div>

CSS

.content {
    display: inline-block;
    border: 1px solid yellow;
    margin-right: 10px;
    padding: 5px;
}
.content:hover {
    cursor: pointer;
}
.content.active {
    background: yellow;
    cursor: inherit;
}

JavaScript

$('body').on('click', '#one', function() {  
    $(this).addClass('active');
    alert('clicked');
    noClickOnActive();
});

$('body').on('click', '#two', function() {  
    $(this).addClass('active');
    alert('another clicked');
    noClickOnActive();
}); 

function noClickOnActive() {
    $('body').on('click', '.content.active', function(event) {  
        event.preventDefault()
        event.stopPropagation();
    }); 
};