JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div class="cols">
 <div class="col">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box fs"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box fs"></div>
  <div class="box"></div>
 </div>
</div>

JavaScript

$('.fs').wrap('<div class="g" />');
var group = [];
$('.col > .box').each(function() {
    group.push($(this));
    if (!$(this).next().hasClass('box')) {
        // next one doesnt have box class, so wrap group
        var target = $('<div class="g" />');
        $(group).each(function(){
            // add each grouped box to a g container
            $(this).clone().appendTo($(target));
        });
        // insert g container before the first box from the group its replacing
        $(target).insertBefore($(group)[0]);
        
        $(group).each(function(){
            $(this).remove();
        });
        group = [];
    }
});