JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">I am #one!</div>
<div id="two">I am #two!</div>
<div id="three">I am #three!</div>


<p>JS output here:</p>
<div id="op"></div>

<h2>Complete power to you!</h2><p>Add or remove click listeners from whichever div in whichever you want:</p>
<p>Add click listener to:</p>
<button data-num=1>#one</button>
<button data-num=2>#two</button>
<button data-num=3>#three</button>
<p>Remove click listener from:</p>
<button data-num=1>#one</button>
<button data-num=2>#two</button>
<button data-num=3>#three</button>

CSS

#one, #two, #three{
    width: 500px;
    height: 100px;
    text-align: center;
    font-size: 20px;
}

#one{background: #ab0;}
#two{background: #7b7;}
#three{background: #0ab;}

#op{
    min-height: 100px;
    max-height: 1000px;
    width: 200px;
    border: 1px solid black;
    font-size: 15px;
    padding: 5px;
    line-height: 19px;
}

JavaScript

var hasEvent, getEvents;
(function (window) {
    hasEvent = function (elm, type) {
        var ev = elm.dataset.events;
        if (!ev) return false;

        return (new RegExp(type)).test(ev);
    };

    getEvents = function (elm, type) {
        var ev = elm.dataset.events;
        ev = ev.replace(/(^,+)|(,+$)/g, "").split("").filter(function (elm) {
            return elm !== "";
        });

        return ev;
    };

    function addRemoveEvent(elm, type, bool) {
        if (bool) elm.dataset.events += "," + type;
        else elm.dataset.events = elm.dataset.events.replace(new RegExp(type), "");
    }

    function makeListener(name, bool) {
        var f = EventTarget.prototype[name + "EventListener"];

        return function (type, callback, capture, cb1, cb2) {
            if (!this.dataset.events) this.dataset.events = "";

            var has = hasEvent(this, type);

            // event has already been added/removed
            // do not attach listener
            if ((bool && has) || (!bool && !has)) {
                if (cb2) cb2();
                return false;
            }

            f.call(this, type, callback, capture);
            addRemoveEvent(this, type, bool);

            if (cb1) cb1();

            return true;
        };
    }

    EventTarget.prototype.addEventListener = makeListener("add", true);
    EventTarget.prototype.removeEventListener = makeListener("remove", false);
})();

var divs, b1, b2, b3, b4, b5, b6, op;
b1 = document.querySelector("button:nth-of-type(1)");
b2 = document.querySelector("button:nth-of-type(2)");
b3 = document.querySelector("button:nth-of-type(3)");
b4 = document.querySelector("button:nth-of-type(4)");
b5 = document.querySelector("button:nth-of-type(5)");
b6 = document.querySelector("button:nth-of-type(6)");

divs = [document.getElementById("one"), document.getElementById("two"), document.getElementById("three")];
op = document.getElementById("op");

function print(msg){
    op.innerHTML += msg +...