JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<ol>
  <li class="a">a</li>
  <li class="foo">foo</li>
  <li class="a">a</li>
  <li class="a">a</li>
  <li class="foo">foo</li>
  <li class="foo">foo</li>
  <li class="foo">foo</li>
  <li class="a">a</li>
  <li class="foo">foo</li>
  <li class="foo">foo</li>
  <li class="foo">foo</li>
</ol>

CSS

ol {
    margin-left:10px;
    border: 1px solid orange;
}

JavaScript

$('ol .foo').each(function() {
    var $th = $(this);
    if($th.prev('.foo').length) return;
    var nextUn = $th.nextUntil(':not(.foo)');
    if( nextUn.length)
        nextUn.andSelf().wrapAll('<li><ol></ol></li>');
});