JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li id="a1">a1 <input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></li>
    <li id="a2">a2 <input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></li>
    <li id="a3">a3 <input name='higher' type='button' value='higher'/><input name='lower' type='button' value='lower'/></li>
</ul>

JavaScript

$('#list').delegate('input[type="button"]', 'click', function() {
    var parent = $(this).parent();
    
    if(this.value === 'higher'){
        parent.insertBefore(parent.prev());
    } else {
        parent.insertAfter(parent.next());
    }
    
    return false;
});