JSFiddle - React, Tailwind, and code Playground

by João Felipe

HTML

<textarea name="message">
   <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> 
            <label>4#</label> 
        </li>
            <li> 
        <label>5#</label> 
        </li>
    
        <li> 
          <!-- First read that contains only label inside -->
          <label>6#</label> 
        </li>
    </ul>
    <table>
        <tbody>
            <tr>
            <td>#1</td>
            <td>#2</td>
            <td>#3</td>
            </tr>
                    <tr>
            <td>#1</td>
            <td>#2</td>
            <td>#3</td>
            </tr>
            <tr>
            <td>#1</td>
            <td>#2</td>
            <td>#3</td>
            </tr>
        </tbody>
    </table>
    <ul>
        <li>
           <label>7#</label> <input type="text" value="" />
        </li>
           <li>
       <label>8#</label> <input type="text" value="" />
    </li>
    <li>
       <label>9#</label> <input type="text" value="" />
    </li>
    <li>
       <label>10#</label> <input type="text" value="" />
    </li>
    </ul>
</textarea>
<button>process</button>

CSS

label{
    color:red;
}
ul:first-child{
    background:orange;
}
ul{
    background:gray;
}

JavaScript

$('button').click(function () {
    var code = $('textarea[name=message]').val();

    if ($('#output').length < 1) {
        $("body").append('<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>');
    }
    
    var livehtml = $('<div/>', {
        html:code
    });

     livehtml.find("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);
    li.contents().unwrap();
    });
    
    $('#output').val(livehtml.html());
});