JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <ul class="alternate-option">
        <li class="current">Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>
<button id="addItem">Add new list item</button>
<button id="replaceList">Replace entire list</button>

CSS

.alternate-option li
{
    padding: 10px;
    cursor: pointer;
}
.current {
    background-color: #5555FF;
}

JavaScript

$(function () {
    $("#content").on("click", ".alternate-option li", function () {
        console.log("click happened");
        $(".alternate-option li.current").removeClass("current");
        $(this).addClass("current");
    });
    
    $("#addItem").click(function () {
        var numOptions = $(".alternate-option li").length + 1;
        var $newLI = $("<li>").text("Item " + numOptions);
        $(".alternate-option").append($newLI);
    });
    
    $("#replaceList").click(function () {
        $(".alternate-option").remove();
        $("<ul>").addClass("alternate-option").append("<li>Item 1</li><li>Item 2</li>").appendTo("#content");
    });
});