JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div id="bar">
    <div id="h2">01</div>
    <div id="h2">02</div>
    <div id="h2">03</div>
    <div class="h1">1
        <div id="a1">8</div>
    </div>
    <div id="h2">2</div>
</div>

JavaScript

function reverseChild($parent, index,$replaceObj) {
        var childItem = $parent.children().eq(index-1);
        var replaceObjIndex=$replaceObj.index()+1;
        //alert(childItem.length);
        //alert($replaceObj.length);
        $replaceObj.insertAfter(childItem);
        insertAtIndex("bar",replaceObjIndex,childItem);
    };
    $(document).ready(function () {
        reverseChild($('#bar .h1'), 1,$("#bar").children('div:last'));
    });
    function insertAtIndex(objID,i,$insertItem) {
        if(i === 0) {
         $("#"+objID).prepend($insertItem);        
         return;
        }
        $("#"+objID+" > div:nth-child(" + (i-1) + ")").after($insertItem);
    }