JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div id="t"></div>

JavaScript

function addClass(el, class){
    console.log('Before Add: "'+el.className+'"');
    var elClass = ' '+el.className+' ';
    if(elClass.indexOf(' '+class+' ') == -1)
        elClass += class;
    el.className = trim(elClass);
    console.log('After Add: "'+trim(elClass)+'"');
}

function removeClass(el, class){
    console.log('Before Remove: "'+el.className+'"');
    var elClass = ' '+el.className+' ';
    while(elClass.indexOf(' '+class+' '))
         elClass = elClass.replace(' '+class+' ', '');
    elClass = trim(elClass);
    el.className = elClass;
    console.log('After Remove: "'+trim(elClass)+'"');
}

function trim(str){
     return str.replace(/^\s+/, '').replace(/\s+$/, '');   
}

var el = document.getElementById('t');
addClass(el, 'test1');
addClass(el, 'test1');
addClass(el, 'test2');
addClass(el, 'test3');
removeClass(el, 'test3');
removeClass(el, 'test3');
removeClass(el, 'test1');
removeClass(el, 'test1');