JSFiddle - React, Tailwind, and code Playground

HTML

<div id="items">
    <div id="item1">
        item 1
        <a href="#" class="move-up">Up</a> | <a href="#" class="move-down">Down</a>
    </div>
    <div id="item2">
        item 2
        <a href="#" class="move-up">Up</a> | <a href="#" class="move-down">Down</a>
    </div>
    <div id="item3">
        item 3
        <a href="#" class="move-up">Up</a> | <a href="#" class="move-down">Down</a>
    </div>
</div>

JavaScript

$('.move-up').click(function(e){
    var $div = $(this).closest('div');
    
    // Does the element have anywhere to move?
    if ($div.index() > 0){
        $div.fadeOut('slow',function(){
            $div.insertBefore($div.prev('div')).fadeIn('slow');
        });
    }
});

$('.move-down').click(function(e){
    var $div = $(this).closest('div');
    
    // Does the element have anywhere to move?
    if ($div.index() <= ($div.siblings('div').length - 1)){
        $div.fadeOut('slow',function(){
            $div.insertAfter($div.next('div')).fadeIn('slow');
        });
    }
});