JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="a" href="#">Add a new class!</div>
<div class="a" href="#">Add a new class!</div>
<div class="a" href="#">Add a new class!</div>
<div class="a" href="#">Add a new class!</div>

CSS

a {
    margin:20px;
    padding:10px 15px;
    background:#FFD202;
    border-radius:5px;
    color:#222;
    display:inline-block;
    text-decoration:none;
}
.sclick {
    background:#000;
    color:#FFD202;
}

JavaScript

// hasClass
function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// addClass
function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}
// removeClass
function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}
// toggleClass
function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, " ") + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0) {
            newClass = newClass.replace(" " + className + " ", " ");
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}

function add_removeMulti() {
    addClass(this, 'sclick');
    if (hasClass(this, 'sclick')) {
        removeClass(this, 'sclick');
    }
}

var classbutton = document.getElementsByClassName('a');
for (var i = 0; i < classbutton.length; ++i) {
    var item = classbutton[i];
    item.onclick = add_removeMulti;
}