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;
}

JavaScript

$(document).ready(function(){
    $('.move-up').click(function(){
        debugger;
        if ($(this).prev())
            $(this).parent().insertBefore($(this).parent().prev());
           $(this).parent().animate({
    opacity: 0.1
  }, 1500 );
    });
    $('.move-down').click(function(){
        if ($(this).next())
            $(this).parent().insertAfter($(this).parent().next());
                      $(this).parent().animate({
                 opacity: 0.4
                   }, 1500 );
    });
});