JSFiddle - React, Tailwind, and code Playground

by andromedado

HTML

<div id="pictureThread">
<div class="pictureinthread">
        <div class="picturemeta">
            <a href="javascript:void(0)">
                <div class="voteamount">3</div>
            </a>     
        </div>
</div>

<div class="pictureinthread">
        <div class="picturemeta">
            <a href="javascript:void(0)">
                <div class="voteamount">8</div>
            </a>     
        </div>
</div>

<div class="pictureinthread">
        <div class="picturemeta">
            <a href="javascript:void(0)">
                <div class="voteamount">30</div>
            </a>     
        </div>
</div>
<div class="pictureinthread">
        <div class="picturemeta">
            <a href="javascript:void(0)">
                <div class="voteamount">13</div>
            </a>     
        </div>
</div>
</div>

CSS

.rel {
    position:relative;
}

JavaScript

$(function(){
        function getVN($div){
            return parseInt($div.find('.voteamount').text(),10);
        }
        function sendDown($div){
            //Prettily Animated Swap of this div with it's next sibling
            var h = $div.height(),
                d1 = false,
                d2 = false,
                c = $div.add($div.next()).addClass('rel');
            $div.animate({top:h},1000,'linear',function(){
                d1 = true;
                if (d1 && d2) {
                    $div.next().after($div);
                    c.removeClass('rel').attr('style','');
                    updatePos($div);
                }
            });
            $div.next().animate({top:(-1 * h)},1000,'linear',function(){
                d2 = true;
                if (d1 && d2) {
                    $div.next().after($div);
                    c.removeClass('rel').attr('style','');
                    updatePos($div);
                }
            });
        }
        function sendUp($div){
            //Prettily Animated Swap of this div with it's previous sibling
            var h = $div.prev().height(),
                d1 = false,
                d2 = false,
                c = $div.add($div.prev()).addClass('rel');
            $div.animate({top:(-1 * h)},1000,'linear',function(){
                d1 = true;
                if (d1 && d2) {
                    $div.after($div.prev());
                    c.removeClass('rel').attr('style','');
                    updatePos($div);
                }
            });
            $div.prev().animate({top:h},1000,'linear',function(){
                d2 = true;
                if (d1 && d2) {
                    $div.after($div.prev());
                    c.removeClass('rel').attr('style','');
                    updatePos($div);
                }
            });
        }
        function updatePos($div){
            var mV = getVN($div), pV, nV;
            if ($div.prev('.pictureinthread').length) {
       ...