JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://eyahuska.com/classlist.js"></script>
<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

var classbutton = document.getElementsByClassName('a');

function add_removeMulti() {
    for (var i = 0; i < classbutton.length; ++i) {
        var item = classbutton[i];
        item.classList.remove("sclick");
    }
    this.classList.add("sclick");
}
for (var i = 0; i < classbutton.length; ++i) {
    var item = classbutton[i];
    item.onclick = add_removeMulti;
}