JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div id="test1">
    <p>You can only</p>
    <p>click one of</p>
    <p>us to</p>
    <p>get the</p>
    <p>event to fire</p>
    <p>then its done</p>
</div>
<br />
<br />
<div id="test2">
    <p>You can</p>
    <p>click each one</p>
    <p>of us to</p>
    <p>get the event</p>
    <p>to fire</p>
    <p>after you have</p>
    <p> clicked all of</p>
    <p>us its done</p>
</div>
<button id="reset">Reset Demonstration</button>

CSS

p {
    border-bottom: 1px solid #000000;
}

div {
    border-top: 1px solid #000000;
}

.not_clicked {
    background-color: #FFFF00;
}

JavaScript

// using "one" for one disposible event across multiple elements
$(function () {
    reset_all_events();
    $('#reset').on('click', function () {
        reset_all_events();
    });
});

function reset_all_events() {
    $('p').addClass('not_clicked');
    $('#test2 p').off('click');
    $('#test1').off('click');
    
    $('#test2 p').one('click', function () {
        alert($(this).text());
        $(this).removeClass('not_clicked');
    });
    $('#test1').one('click', 'p', function () {
        alert($(this).text());
        $('#test1 p').removeClass('not_clicked');
    });
}