JSFiddle - React, Tailwind, and code Playground

by snover

HTML

<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>

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() {
    $('.mover').live('click', function(e) {
        var $this = $(this),
            parent = $this.closest('li'),
            direction = $this.hasClass('mover-up');
        parent[direction ? 'prev' : 'next']()[direction ? 'before' : 'after'](parent);
    });
});