JSFiddle - React, Tailwind, and code Playground

HTML

<button class="upbutton">Up</button><button class="downbutton">Down</button>
<ul id="ul_li_SubCategories" style="width:200px;" class="chargeCapturetable margin0">
    <li sequence="1" title="Category 1" class="liEllipsis" value="9">
        <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 1</a>
    </li>
    <li sequence="2" title="Category 3" class="liEllipsis selected" value="11">
        <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 3</a>
    </li>
    <li sequence="4" title="Category 4" class="liEllipsis" value="12">
        <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 4</a>
    </li>
    <li sequence="5" title="Category 6" class="liEllipsis" value="22">
        <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 6</a>
    </li>
    <li sequence="6" title="Category 5" class="liEllipsis" value="13">
        <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 5</a>
    </li>
    <li sequence="7" title="Category 7" class="liEllipsis" value="55">
        <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 7</a>
    </li>
    <li sequence="99999" title="Category 8" class="liEllipsis" value="62">
        <a href="#"><span class="viewIcons delFaceName _delete fl"></span>Category 8</a>
    </li>
</ul>

CSS

.selected {
    background-color: red;
}

JavaScript

$('.liEllipsis').on('click', function () {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

$('.upbutton').on('click', function () {
    var $currentElement = $('#ul_li_SubCategories .selected');
    moveUp($currentElement);
});
    
$('.downbutton').on('click', function () {
    var $currentElement = $('#ul_li_SubCategories .selected');
    moveDown($currentElement);
});

var moveUp = function ($currentElement) {
    var hook = $currentElement.prev('.liEllipsis');
    if (hook.length) {
        var elementToMove = $currentElement.detach();
        hook.before(elementToMove);
    }
};

var moveDown = function ($currentElement) {
    var hook = $currentElement.next('.liEllipsis');
    if (hook.length) {
        var elementToMove = $currentElement.detach();
        hook.after(elementToMove);
    }
};