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

$(".test li").click(function () {
        $("span").text("That was div index #" + $(this).index());

        var $ul = $(this).parent();
        var $following = $(this).nextAll('li'); // get all following `li` elements

        if ($following.length > 0) {
            // Create a new list, append the `li` elements and add the list
            // after the current list
            $('<ul />', {'class': 'test'}).append($following).insertAfter($ul);
        }

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