JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div class="top5 first">
    <span>1</span>
    <div class="voter">
        <a class="up" href="#">up</a>
        <a class="down" href="#">down</a>
    </div>                    
</div>


<div class="top5 second">
    <span>2</span>
    <div class="voter">
        <a class="up" href="#">up</a>
        <a class="down" href="#">down</a>
    </div>                    
</div>

<div class="top5 third">
    <span>3</span>
    <div class="voter">
        <a class="up" href="#">up</a>
        <a class="down" href="#">down</a>
    </div>                    
</div>

JavaScript

$(function(){
    $('.up').click(function(){
        var parent = $(this).closest('.top5'); // find parent
        var index = $('.top5').index(parent); //get index
        if(index > 0){
            var prevParent = $('.top5').eq(index - 1);
            parent.insertBefore(prevParent);
        }
    });
    
    $('.down').click(function(){
        var parent = $(this).closest('.top5'); // find parent
        var index = $('.top5').index(parent); //get index
        if(index < $('.top5').length){ 
            var nextParent = $('.top5').eq(index + 1);
            parent.insertAfter(nextParent);
        }
    });
});