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>

JavaScript

var brandModelLineCount = 4
$('.brandModelWrapperGroup').each(function(){
      var brandModelwrapperdivs = $(this).find(".brandModelWrapper")
      for(var i = 0; i < brandModelwrapperdivs.length; i+=brandModelLineCount) {
        brandModelwrapperdivs .slice(i, i+brandModelLineCount).wrapAll("<section class='brandModelLineWrapper'></section>")
      }
      var brandModelviewdivs = $(this).find(".brandModelView")
      for(var i = 0; i < brandModelviewdivs.length; i+=brandModelLineCount) {
        brandModelviewdivs.slice(i, i+brandModelLineCount).wrapAll("<section class='brandModelLineWrapper'></section>")
      }
    })