JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div>
    <ul>
        <li class="text">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="text">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
         <li class="text">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
         <li class="text">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
         <li class="text">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
        <li class="subText">TEXT</li>
    </ul>
</div>

CSS

.space {
    height: 2000px;
    background: gray;
}

JavaScript

$('ul').find('li.text').unwrap().each(function () {
    $(this).nextUntil('.text').andSelf().wrapAll($('<ul/>'));
});