JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap"></div>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>

</ul>

<ul>
    <li>a</li>
    <li>b</li>
</ul>		

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

CSS

ul li {
    background-color: silver;
}

ul li:nth-child(1){
    background-color: cyan;
}

ul li:nth-child(4){
    background-color: red;
}

ul li:nth-of-type(5){
    background-color: yellow;
}

JavaScript

var arrLi = [];
$('ul').each(function() {
    $(this).find('li').each(function() {
        arrLi.push($(this).html());
    });
    $(this).remove();
});
var ul = $('<ul></ul>').attr({id:"ulid"}).appendTo("#wrap");
for(var i in arrLi) {
    var li =$('<li>'+arrLi[i]+'</li>');
    li.appendTo(ul);
}