JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul id="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>

<div>
    <button id="btn_top">Top</button>
    <button id="btn_bottom">Bottom</button>
</div>

CSS

ul { list-style-type: none }
li { padding: 5px; margin-bottom: 2px; width:100px; border:1px solid black; background-color: #E0E0E0 }
.selected { font-weight: bold; color: red }

JavaScript

$(function() {
    var selectedItem = null;
    var isSorting = false;
    
    $("ul#sortable")
    .sortable({
        start: function() { isSorting = true; }
    })
    .find("li").click(function(e) {
        if (!isSorting) {
            selectedItem = $(e.target).addClass("selected");
            selectedItem.siblings().removeClass("selected");
        }
        else {
            isSorting = false;
        }
    });

    $("button#btn_top").click(function() {
        if (selectedItem != null) {
            selectedItem.prependTo(selectedItem.parent());
        }
    });

    $("button#btn_bottom").click(function() {
        if (selectedItem != null) {
            selectedItem.appendTo(selectedItem.parent());
        }
    });

});