JSFiddle - React, Tailwind, and code Playground

by fixit

HTML

<div class="parent-container" id="parent-container">
    Just some text
</div>

<button id="addClass">Add Class</button>
<button id="removeClass"">Remove Class</button>

CSS

.someClass {
    color:red;
}

JavaScript

if(typeof String.prototype.trim !== 'function') {
      String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, ''); 
      }
    }
    
    function addClass(element,className) {
      var currentClassName = element.getAttribute("class");
      if (typeof currentClassName!== "undefined" && currentClassName) {
        element.setAttribute("class",currentClassName + " "+ className);
      }
      else {
        element.setAttribute("class",className); 
      }
    }
    function removeClass(element,className) {
      var currentClassName = element.getAttribute("class");
      if (typeof currentClassName!== "undefined" && currentClassName) {
    
        var class2RemoveIndex = currentClassName.indexOf(className);
        var class2Remove = currentClassName.substr(class2RemoveIndex, className.length);
    
        var updatedClassName = currentClassName.replace(class2Remove,"").trim();
    
        element.setAttribute("class",updatedClassName);
      }
      else {
        element.removeAttribute("class");   
      } 
    }

var targetElement = document.getElementById("parent-container");

var removeClassElement = document.getElementById("addClass");
var addClassElement = document.getElementById("removeClass");

removeClassElement.onclick = function() {
    addClass(targetElement,"someClass");    
}

addClassElement.onclick = function() {
    removeClass(targetElement,"someClass");
}