JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<ul id="GroupBy">
    <li id="One">
        one<a href="#" onclick="MoveItem('One', 1)"> V </a>
    </li>
    <li id="Two">
        <a href="#" onclick="MoveItem('Two', -1)"> ^ </a>two<a href="#" onclick="MoveItem('Two', 1)"> V </a>
    </li>
    <li id="Three">
        <a href="#" onclick="MoveItem('Three', -1)"> ^ </a>three<a href="#" onclick="MoveItem('Three', 1)"> V </a>
    </li>
    <li id="Four">
        <a href="#" onclick="MoveItem('Four', -1)"> ^ </a>four
    </li>
</ul>

JavaScript

function MoveItem(id, direction) {
    var ul = document.getElementById('GroupBy');
    var items = ul.getElementsByTagName('li');

    var counter = 0;
    var previousItem = null;
    var moveNextItemUp = false;

    for (var i = 0, len = items.length; i < len; i++) {
        var item = items[i];

        if (item.id == id) {
            if (direction == 1) { 
                moveNextItemUp = true;
            } else if ((direction == -1) || (moveNextItemUp == true)) {

                item.parentNode.insertBefore( item,items[i-1] );
                break;
            }
        }

        previousItem = item;
        counter = counter + 1;
    }

}