JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<ul class="reOrder">
    <li>Item 1 <span><b>Old</b></span></li>
    <li>Item 2 <span><b>Old</b></span></li>
    <li>Item 3 <span><b>Old</b></span></li>
    <li>Item 4 <span><b>Old</b></span></li>
</ul>
<p>
    <input type="button" id="add" value="ADD ITEM" />
</p>

CSS

p {
    margin-top:20px;
}
b { cursor:pointer; }

JavaScript

$("document").ready(function () {

    $(".reOrder").on('click', 'li b', function () {

        var listItem = $(this).closest("li");
        var index = listItem.index();
        if (index != 0) {
            // li item is not sitting in the first position
            $(".reOrder li:eq(" + (index - 1) + ")").before(listItem);
        }
    });

    $('#add').click(function () {
        $('.reOrder').append('<li>Item <span><b>New</b></span></li>');
    })
});