JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li class="odd a one">List Item (type1)</li>
    <li class="even b two">List Item (type1)</li>
    <li class="odd c three">List Item (type1)</li>
    <li class="even d one">List Item (type1)</li>
    <li class="odd a two">List Item (type1)</li>
    <li class="even b three">List Item (type1)</li>
    <li class="odd c one">List Item (type1)</li>
    <li class="even d two">List Item (type2)</li>
    <li class="odd a three">List Item (type2)</li>
    <li class="even b one">List Item (type2)</li>
</ol>

CSS

ol { padding: 0; width: 320px; list-style: none; }
li { float: left; width: 98px; height: 98px; margin: 0 10px 10px 0; border: 1px solid #AAA; }
.one { clear: left; }
.three { margin: 0 0 10px; }

JavaScript

$('body').append("<h2>Type 2 starts here</h2>");
$('body').append("<ol class='two'>");
$('li:contains("type2")').appendTo("ol.two");