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 () {
    var text = "<p class=\"temp\">Test</p>";
  // this is the dom element clicked
  var index = $(".test li").index(this);
  $("span").text("That was div index #" + index);
   var element = $('.test li').get(index);
	$('.temp').remove();
    $("</ul>"+text+"<ul class=\"test\">").insertAfter(element);
});