JSFiddle - React, Tailwind, and code Playground

HTML

<div id="element" class="class1 class2"></div>

CSS

#element {
    width: 100px;
    height: 100px;
    background: black;
}

#element.class1 {
    background: blue;
}

#element.class2 {
    background: red;
}

JavaScript

var element = document.getElementById('element');

function addEvent (elem, event, fn) {
    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        var ret = fn.call(elem, window.event);   
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

function toggleClass (elem, toggledClassName) {
	var classNames = elem.className.split(' ');
    var index = classNames.indexOf(toggledClassName);
    
    if (index > -1) {
    	classNames.splice(index, 1);
    } else {
    	classNames.push(toggledClassName);
    }
    
    elem.className = classNames.join(' ');
}

addEvent(element, 'click', function (e) {
	toggleClass(element, 'class2');
});