JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="reOrder">
    <li>
        <span class="up">Up1</span>
        <span class="down">Down1</span>
        Item 1
    </li>
    <li>
        <span class="up">Up2</span>
        <span class="down">Down2</span>
        Item 2
    </li>
    <li>
        <span class="up">Up3</span>
        <span class="down">Down3</span>
        Item 3
    </li>
    <li>
        <span class="up">Up4</span>
        <span class="down">Down4</span>
        Item 4
    </li>
</ul>

JavaScript

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

    $('#reOrder li').each(function(index) {
        
        $(this).attr('id', 'item' + index);
        
      });
    
    
    var listLength = $('#reOrder li').length;
  
    
    $("#reOrder").delegate("#reOrder .up", "click", function(){
        
        var listIndex = $(this).closest('li').index('#reOrder li');

        var listItem = $(this).closest('li');
        
        if (listIndex != 0) {
           
           $("#reOrder li:eq(" + (listIndex- 1) + ")").before(listItem);
            
        }
    });

    $("#reOrder").delegate("#reOrder .down", "click", function(){
        
        var listIndex = $(this).closest('li').index('#reOrder li');

        var listItem = $(this).closest('li');
        
        if (listIndex != listLength) {
            
           $("#reOrder li:eq(" + (listIndex + 1) + ")").after(listItem);
            
        }
    });    
    
});