JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<ul id="ulName">
    <li data-sortby="1">three <button id="rGth" >Right</button></li>
    <li data-sortby="2">one <button id="rGth">Right</button></li>
    <li data-sortby="3">two</li>
    <li data-sortby="4">four</li>
</ul>

JavaScript

$(document).ready(function() {

var ul = $('ul#ulName'),
    li = ul.children('li');
 var right = li.data('sortby') + 1;
  var left = li.data('sortby') - 1;
    
    li.detach().sort(function(a,b) {
        return $(a).data('sortby') - $(b).data('sortby');
        
        
    });
    
    $('#rGth').click(function(){
  
            $(li).data('sortby', right);
            $(li).data('sortby',left);
            
        });
    
    ul.append(li);
    
    
});