JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "test">


<ul>
<li data-value="Yes" class=""><div>Yes</div>
</li>
<li data-value="No" class=""><div>No</div></li>
</ul>
</div>

CSS

.Yellow{color:Yellow;}
.Red{color:red;}

JavaScript

// 使用 jQuery 或 $ 意思相同

// 動態增加 css
$("#color").addClass("Red Yellow");

// 動態增加按鈕元件與按鈕屬性
jQuery('<button ></button>',{
    name: 'btnRed',
    text:'Add/Remove Red'
})
    .appendTo("#Message") // 將按鈕附加至 id 為 Message 的元件內
    .click(function(){ // 按鈕綁定 click 事件
           $(this + " [data-value='Yes']").attr("class", "checked");
    });

// 動態增加按鈕元件與按鈕屬性
$("<button></button>",{
    name:'btnBlue',
    text:'Add/Remove Yellow'
})
    .appendTo("#Message") // 將按鈕附加至 id 為 Message 的元件內
    .click(function(){ // 按鈕綁定 click 事件
           $("#color").toggleClass("Yellow"); // 動態新增/移除 css
    });