JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<div class="item">
    <div class="content">Some text1</div>
    <div class="move">
        <div class="move-down">down1</div>
    </div>
</div>
<div class="item">
    <div class="content">Some other text2</div>
    <div class="move">
        <div class="move-up">up2</div>
        <div class="move-down">down2</div>
    </div>
</div>
<div class="item">
    <div class="content">Some text3</div>
    <div class="move">
        <div class="move-up">up3</div>
        <div class="move-down">down3</div>
    </div>
</div>
<div class="item">
    <div class="content">Some other text4</div>
    <div class="move">
        <div class="move-up">up4</div>
    </div>
</div>

CSS

.item {
    border: 1px solid red;
}

JavaScript

// el is the clicked one.
jQuery('.move').children().click(function (e) {
    console.log(jQuery(e.target).is('move-down'));
    var $div = $(this).closest('.item');
    console.log($div);
    if (jQuery(el.target).is('move-down')) {
        $div.next().after($div);
    } else {
        $div.prev().before($div);
    }
});