JSFiddle - React, Tailwind, and code Playground

by andyw_

HTML

<button class="btn" onclick="">A</button>
  <button class="btn">B</button>
  <button class="btn">C</button>
  <button class="btn">D</button>
  <button class="btn">F</button>
  <button class="btn">G</button>

CSS

.btn {
    border: 1px solid #ccc;
}
.btn.active {
    border: 1px solid #000;
}

JavaScript

(function() {
    var buttons = document.getElementsByClassName('btn'); //get the buttons by their class
    if(buttons && buttons.length > 0) {
        for(var i=0; i < buttons.length; i++) {
            var button = buttons[i];
            button.addEventListener('click', function(e) {
                e.preventDefault(); //prevent the default button behaviour
                this.classList.toggle('active'); // toggle active class
            }); // add a click event handler
        }
    }
})(); // self invoking function - this is invoked when the JS interpreter see's it