JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixture" style="display: none">
    <div id="hasNotRedClass">This element hadn't class .red initially</div>
    <div id="hasRedClass" class="red">This element had class .red initially</div>
</div>

<table id="workplace" bordercolor = "black">
        <tr>
            <th>Fixture</th>
            <th>Switch arg</th>
            <th>Result of .toggleClass</th>
            <th>Result of equivalent</th>
        </tr>
</table>

CSS

table
{
    width: 100%;
}
td, th
{
    border: solid 1px black;
}
.red
{
    color: red;
}

JavaScript

$.fn.extend({
    toggleClassEquiv: function(className, addOrRemove) {
        if (addOrRemove)
            this.addClass(className);
        else
            this.removeClass(className);
        return this;
    }
});
$(function() {
    var test = function(fixture, addOrRemove, expected) {
        var td0 = $("<td />").append(fixture);
        
        var td1 = $("<td />").append(addOrRemove + "");
        
        var td2 = $("<td />").append(
            $(fixture).clone()
                .toggleClass("red", addOrRemove)
                .text("This text must have "  + expected  + " color")
        );
        
        var td3 = $("<td />").append(
            $(fixture).clone()
                .toggleClassEquiv("red", addOrRemove)
                .text("This text must have "  + expected  + " color")
        );
        
        $("<tr />").append(td0, td1, td2, td3).appendTo("#workplace");
    }
    
    test("#hasNotRedClass", true, "red");
    test("#hasNotRedClass", 1, "red");
    
    test("#hasNotRedClass", false, "black");
    test("#hasNotRedClass", 0, "black");
    
    test("#hasRedClass", true, "red");
    test("#hasRedClass", 1, "red");
    
    test("#hasRedClass", false, "black");
    test("#hasRedClass", 0, "black");
    
});