JSFiddle - React, Tailwind, and code Playground
HTML
<section class="brandModelWrapperGroup group_1" data-model-group="1">
<section class="brandModelWrapper" data-model-group="1" data-model-id="5"> <a href="#!" class="brandModel" data-model-group="1" data-model-id="5">
Title
</a>
</section>
<section class="brandModelView brandModelSlideshowView view_5" data-model-group="1" data-model-id="5"></section>
<section class="brandModelWrapper" data-model-group="1" data-model-id="6"> <a href="#!" class="brandModel" data-model-group="1" data-model-id="6">
Title
</a>
</section>
<section class="brandModelView brandModelSlideshowView view_6" data-model-group="1" data-model-id="6"></section>
</section>
CSS
.brandModelLineWrapper {
background-color : red;
}
JavaScript
var brandModelLineCount = 4
$('.brandModelWrapperGroup').each(function(){
var group = $(this).attr("data-model-group");
var targets = $(this).find(".brandModelWrapper, .brandModelView").filter('[data-model-group="' + group + '"]');
var i, len = targets.length;
for (i = 0; i < len; i += brandModelLineCount) {
targets.slice(i, i + brandModelLineCount).wrapAll("<section class='brandModelLineWrapper'></section>");
}
});