JSFiddle - React, Tailwind, and code Playground

HTML

<div class="try" id="try1">1</div>
<div class="try" id="try2">2</div>
<div class="try" id="try3">3</div>
<div class="try" id="try4">4</div>
<div class="try" id="try5">5</div>
<div class="try" id="try6">6</div>
<div class="try" id="try7">7</div>
<div class="try" id="try8">8</div>

CSS

.try
{
    width:100px;
    padding:5px;
    border:1px solid #000000;
    margin-bottom:4px;
}

JavaScript

function swap($a, $b) { // a and b are $jquery elements
    if ($b.index()<$a.index()) {
       var t = $a;
       $a = $b; $b = t;        
    }
    if ($b.index()==$a.index()+1) {
        $b.insertBefore($a);
    } else {
        var $c = $a.next();
        $a.insertBefore($b);
        $b.insertBefore($c);
    }
}

function swapById(a, b) {
    swap($('#try'+a), $('#try'+b));
}

swapById(7,3); // try changing the ids