JSFiddle - React, Tailwind, and code Playground

HTML

<span id="span-1">Contents of SPAN 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<a class="move-up"><b>Up</b></a>/<a class="move-down"><b>Down</b></a>]</span>
<span id="span-2">Contents of SPAN 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<a class="move-up"><b>Up</b></a>/<a class="move-down"><b>Down</b></a>]</span>
<span id="span-3">Contents of SPAN 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<a class="move-up"><b>Up</b></a>/<a class="move-down"><b>Down</b></a>]</span>
<span id="span-4">Contents of SPAN 4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<a class="move-up"><b>Up</b></a>/<a class="move-down"><b>Down</b></a>]</span>
<span id="span-5">Contents of SPAN 5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<a class="move-up"><b>Up</b></a>/<a class="move-down"><b>Down</b></a>]</span>

CSS

a {
    display: inline-block;
    text-align: center;
    width:50px;  
}
span {
    cursor: pointer;
    display: block;
    position: relative;
}

JavaScript

$(document).ready(function(){
    $('.move-up').click(function(){
        if ($(this).prev()){
            var t = $(this);
            t.parent().animate({top: '-20px'}, 500, function(){
                t.parent().prev().animate({top: '20px'}, 500, function(){
                    t.parent().css('top', '0px');
                    t.parent().prev().css('top', '0px');
                    t.parent().insertBefore(t.parent().prev());
                });
            });
        }
    });
    $('.move-down').click(function(){
        if ($(this).next()){
            var t = $(this);
            t.parent().animate({top: '20px'}, 500, function(){
                t.parent().next().animate({top: '-20px'}, 500, function(){
                    t.parent().css('top', '0px');
                    t.parent().next().css('top', '0px');
                    t.parent().insertAfter(t.parent().next());
                });
            });
        }
    });
});