JSFiddle - React, Tailwind, and code Playground

HTML

<span>Click a div!</span>
        <ul class="test">
<li>First div</li>
<li>Second div</li>
<li>Third div</li>
<li>Fourth div</li>
<li>Fith div</li>
<li>Sixth div</li>
        </ul>

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 () {
  var copied = $(this).nextAll().detach(), ul = $(this).closest("ul"), copyUl = ul.clone().empty().append(copied), test = $("<p>Test</p>",{"class":"temp"}); 
if(copied.length > 0){
  ul.after(test);
  test.after(copyUl);
}

});