JSFiddle - React, Tailwind, and code Playground

HTML

<div id="lists">
    <ul id="list1">
        <li>jQuery</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul id="list2">
        <li>CSS3</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul id="list3">
        <li>Manual</li>
        <li>1</li>
        <li class="special">2</li>
        <li>3</li>
    </ul>
    <ul id="list4">
        <li>jQuery Fixed</li>
        <li>1</li>
        <li class="special">2</li>
        <li>3</li>
    </ul>
</div>
<p><a id="addItems" href="#">Add Items to Lists</a>
</p>

CSS

#lists {
    overflow:hidden;
}
#lists ul {
    float: left;
}
#list2 li:nth-last-child(2),
.special {
    background: red;
}

JavaScript

$(function () {
    $("#addItems").click(addItems);
    $("#list1 li:nth-last-child(2)").addClass("special");
    
});

function addItems() {
    var nextNumber = parseInt($("#list1 li:last-child").text(),10) + 1;
    $("#list1").append("<li>" + nextNumber + "</li>");
    $("#list2").append("<li>" + nextNumber + "</li>");
    $("#list3").append("<li>" + nextNumber + "</li>");
    $("#list4 li:nth-last-child(2)").removeClass("special");
    $("#list4").append("<li>" + nextNumber + "</li>");
    $("#list4 li:nth-last-child(2)").addClass("special");

}