JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <body>
        <ul>
            <li>Item 1 <a href="#" class="mover mover-up"></a> <a href="#" class="mover mover-down"></a></li>
            <li>Item 2 <a href="#" class="mover mover-up"></a> <a href="#" class="mover mover-down"></a></li>
            <li>Item 3 <a href="#" class="mover mover-up"></a> <a href="#" class="mover mover-down"></a></li>
        </ul>
    </body>
</html>

CSS

.mover
{
    display:inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}
.mover-up
{
    background-image:url(http://cdn.iconfinder.net/data/icons/splashyIcons/arrow_large_up.png);
}
.mover-down
{
    background-image:url(http://cdn.iconfinder.net/data/icons/splashyIcons/arrow_large_down.png);   
}

JavaScript

$(function () {
    $('body').delegate('.mover', 'click', function (e) {
        var t = $(this);
        var l = t.closest('li');
        var i = l.index() + (t.hasClass('mover-up') ? -1 : 1);
        // Set index of current LI element based off its current position.
        l.index(i);
        alert('This would move this whole LI element to index(' + i + ') if it worked.');
    })
});