JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<button class="playBtn" value="a">A</button> 
 <button class="playBtn" value="b">B</button>
 <button class="playBtn" value="c">C</button>
 <button class="playBtn" value="d">D</button>
 <button class="playBtn" value="e">E</button>

JavaScript

NodeList.prototype.on = function(event,func) {
    [].forEach.call(this, function (el) {
        el.addEventListener(event, func, false);
    });
    return this;//return self to maintain chainability
};

document.querySelectorAll('.playBtn').on('click',function(){
    alert(this.value);
    return false;
});

document.querySelectorAll('.playBtn').on('mouseover',function(){
    this.style.borderColor='red';
}).on('mouseout',function(){
    this.style.borderColor='';
});