JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    
    <body> <span>Click a div!</span>

        <ul class="test">
            <li>First div</li>
            <li>Second div</li>
            <li>Third div</li>
        </ul>
        <p class="temp">Test</p>
        <ul class="test">
            <li>Fourth div</li>
            <li>Fith div</li>
            <li>Sixth div</li>
        </ul>
    </body>

</html>

CSS

.test li {
    background:yellow;
    margin:5px;
}
span {
    color:red;
}
.test {
    border: solid 1px red;
    clear:both;
    margin: 1em;
}
.temp {
    clear:both;
}

JavaScript

var $uls = $("ul.test");
var $lis =  $uls.find("li");

$lis.click(function () {
    var index = $lis.index(this);
    $("span").text("That was div index #" + index);

    var $following = $lis.slice(index + 1); // get all following `li` elements
    if ($following.length > 0) {
       // append to second list
       $uls.eq(1).append($following);
    }
    
    // append all li elements up to the current one to the
    // first list
    $uls.eq(0).append($lis.slice(0, index + 1));

    // add a paragraph after the first list
    $('.temp').remove();
    $('<p />', {'class': 'temp',text: 'Test'}).insertAfter($uls.eq(0));

});