JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="myList verticleList">
    <li>i1</li>
    <li>i1</li>
</ul>
<br />

Current classes: <input type="text" readonly="readonly" id="r" />

<br /><br />
<input type="button" value="Toggle class" />
<input type="button" value="Add class" />
<input type="button" value="Remove class" />
<input type="button" value="Has class" />

CSS

ul { margin-left: 10px }
.verticleList li
{
    list-style: circle;
}
.aClass li { color: red; }

input[type=text] { width: 250px; }

JavaScript

function R()
{
    $("#r").val($(".myList").attr("class"));
}

$(":button:eq(0)").click(function() {
    $(".myList").toggleClass("verticleList");
});
   
$(":button:eq(1)").click(function() {
    $(".myList").addClass("aClass");
});             
   
$(":button:eq(2)").click(function() {
    $(".myList").removeClass("aClass");
}); 
   
$(":button:eq(3)").click(function() {
    alert($(".myList").hasClass("aClass"));
}); 

$(":button").click(R);
    
R();