JSFiddle - React, Tailwind, and code Playground

HTML

<p class="hello">hello</p>
<p class="hi">hi</p>
<hr />
<p class="hello2">hello2</p>
<p class="hi2">hi2</p>

JavaScript

$.event.special.clickFoo = {
    delegateType: "click",
    bindType: "click",
    handle: function(event) {
        event.type = event.handleObj.origType;
        ret = event.handleObj.handler.apply(this, arguments);
        event.type = event.handleObj.type;
        return ret;
    }
};

// GOOD: Only clickable once
$(".hello").one("click", function(event) {
    $(this).append(" world");
});

// BAD: Clickable many times
$(".hi").on("click", function(event) {
    $(this).append(" world");
});

// GOOD: Only clickable once
var fnOrig = function(event) {
    $(this).append(" world");
};
var fn = function(event) {
    $(this).off("clickFoo");
    return fnOrig.apply(this, arguments);
};
$(".hello2").one("clickFoo", fn);

// BAD: Clickable many times
var fnOrig = function(event) {
    $(this).append(" world");
};
var fn = function(event) {
    $(this).off("clickFoo", fnOrig);
    return fnOrig.apply(this, arguments);
};
$(".hi2").one("clickFoo", fn);