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(this.parentNode, 1)"> V </a>
    </li>
    <li id="Two">
        <a href="#" onclick="MoveItem(this.parentNode, -1)"> ^ </a>two<a href="#" onclick="MoveItem('Two', 1)"> V </a>
    </li>
    <li id="Three">
        <a href="#" onclick="MoveItem(this.parentNode, -1)"> ^ </a>three<a href="#" onclick="MoveItem('Three', 1)"> V </a>
    </li>
    <li id="Four">
        <a href="#" onclick="MoveItem(this.parentNode, -1)"> ^ </a>four
    </li>
</ul>

JavaScript

function MoveItem(item, direction) {

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

    if (direction == 1) {
        moveNextItemUp = true;
    } else if ((direction == -1) || (moveNextItemUp == true)) {
        var prev = item.previousSibling
        while( prev && prev.nodeType != 1 && (prev = prev.previousSibling));
        item.parentNode.insertBefore(item, prev);
    }

    previousItem = item;
    counter = counter + 1;
}