JSFiddle - React, Tailwind, and code Playground

by Lucas Trzesniewski

HTML

<ul>
    <li> 
        Text <label>1#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>2#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>3#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>4#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>5#</label> <input type="text" value="" />
    </li>
    <li> 
      <label>6#</label> 
    </li><li>
       <label>7#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>1#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>2#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>3#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>4#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>5#</label> <input type="text" value="" />
    </li>
    <li> 
      <label>6#</label> 
    </li><li>
       <label>7#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>1#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>2#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>3#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>4#</label> <input type="text" value="" />
    </li>
        <li> 
        Text <label>5#</label> <input type="text" value="" />
    </li>
    <li> 
      <label>6#</label> 
    </li><li>
       <label>7#</label> <input type="text" value="" />
    </li>
</ul>

CSS

label{
    color:red;
}

JavaScript

$("ul>li:not(:has(:not(label)))").each(function() {
    var li = $(this);   
    var newUl = $(document.createElement("ul"));
    li.parent().after(newUl);
    li.nextAll("li").andSelf().appendTo(newUl);
});