JSFiddle - React, Tailwind, and code Playground
HTML
<li id='r1' class='myclass'>something r1</li>
<li id='r2' class='myclass'>something r2</li>
<li id='r3' class='myclass'>something r3</li>
<li id='r4' class='myclass'>something r4</li>
<li id='r5' class='myclass'>something r5</li>
CSS
a:link, a:visited, a:hover, a:active{text-decoration:none;color:#000;}
nav ul{list-style:none;}
nav ul li {float:left; margin:5px;}
nav ul li a{background:#0099ff; padding:5px 10px;}
.select{width:10px; height:20px; background:#000;}
.noselect{width:10px; height:20px; background:#ff0000;}
JavaScript
function updown(li_id , dir) {
$('#'+li_id)[dir!='up'?'before':'after']($('#'+li_id)[dir!='up'?'next':'prev']());
}
updown('r2', 'down')
updown('r3', 'up')