JSFiddle - React, Tailwind, and code Playground

by craigm

HTML

<ul class="portfolios" style="opacity: 1;">
    <li id="image0" class="ui-draggable"></li>
    <li id="image1" class="ui-draggable"></li>
    <li id="image2" class="ui-draggable"></li>
    <li id="image3" class="ui-draggable"></li>
    <li id="image4" class="ui-draggable"></li>
    <li id="image5" class="ui-draggable"></li>
    <li id="image6" class="ui-draggable"></li>
    <li id="image0" class="ui-draggable"></li>
    <li id="image1" class="ui-draggable"></li>
    <li id="image2" class="ui-draggable"></li>
    <li id="image3" class="ui-draggable"></li>
    <li id="image4" class="ui-draggable"></li>
    <li id="image5" class="ui-draggable"></li>
    <li id="image6" class="ui-draggable"></li>
    <li id="image7" class="ui-draggable"></li>
    <li id="image0" class="ui-draggable"></li>
    <li id="image1" class="ui-draggable"></li>
    <li id="image2" class="ui-draggable"></li>
    <li id="image3" class="ui-draggable"></li>
    <li id="image4" class="ui-draggable"></li>
    <li id="image5" class="ui-draggable"></li>
    <li id="image6" class="ui-draggable"></li>
    <li id="image7" class="ui-draggable"></li>
    <li id="image8" class="ui-draggable"></li>
    <li id="image9" class="ui-draggable"></li>
    <li id="image10" class="ui-draggable"></li>
</ul>

JavaScript

(function($) {
    var groups = [];
    var group = [];
    var els = $('li');
    do {
        var i = 0;
        var id = $(els[i]).attr('id');
        do {
            group.push($(els[i])[i]);
            i++;
            id = $(els[i]).attr('id');            
        }
        while (id.substring(id.length - 1, id.length) != 0 
               && i <= els.length);
        groups.push(group);
        group = [];
    }
    while (i <= els.length);

    console.log(groups);
})(jQuery);