JSFiddle - React, Tailwind, and code Playground
HTML
<div id="oldlist">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
<li>list item 7</li>
<li>list item 8</li>
<li>list item 9</li>
<li>list item 10</li>
</ul>
</div>
<p>
New List
</p>
<div id="newlist"></div>
JavaScript
var newlist = $('#newlist');
var oldlist = $('#oldlist ul li');
oldlist.each(function(i) {
if (i % 3 === 0) {
newlist.append('<ul>');
}
var limarkup = $(this).clone().wrap('<div>').parent().html();
newlist.find('ul').last().append(limarkup);
});
newlist.children().wrapAll("<ul><li>");