Help with Jquery code to wrap elements

[JamieY]

Hello. I need some help with jquery. I have gotten very very close but can not for the life of me figure this out. I saw this code somewhere and thought it would work for me. It almost does but not completely. Here is my issue.

I am building a WordPress website using a page builder. The page builder does not have the ability to make 100% rows. Therefore, all the content is centered. This site is being built in Bootstrap which does have the ability to do 100% rows. So, in the settings in the page builder, I can add a class to the row of "container-fluid" to get my 100% row which will hold a background or some parallax effect. Now, I need to get my cells to be wrapped with a div with the class of container in order to center them. My main issue with the jquery is that it has grabbed every cell with the class I assigned and put it into the same wrapper. I can't have that. So for example, I want to take this

<div class="container-fluid">
  <div class="panel-grid-cell">
    <p>Some content</p>
  </div><!--END panel-grid-cell-->
  
    <div class="panel-grid-cell">
    <p>Some content</p>
  </div><!--END panel-grid-cell-->
  
    <div class="panel-grid-cell">
    <p>Some content</p>
  </div><!--END panel-grid-cell-->
</div><!--END container-fluid-->

and turn it into this

<div class="container-fluid">
  <div class="container">
    
    <div class="panel-grid-cell">
      <p>Some content</p>
    </div><!--END panel-grid-cell-->
    
      <div class="panel-grid-cell">
       <p>Some content</p>
      </div><!--END panel-grid-cell-->
    
      <div class="panel-grid-cell">
        <p>Some content</p>
      </div><!--END panel-grid-cell-->
    
  </div><!--eND container-->
</div><!--END container-fluid-->

  <div class="container">
    
    <div class="panel-grid-cell">
      <p>Some content</p>
    </div><!--END panel-grid-cell-->
    
      <div class="panel-grid-cell">
       <p>Some content</p>
      </div><!--END panel-grid-cell-->
    
      <div class="panel-grid-cell">
        <p>Some content</p>
      </div><!--END panel-grid-cell-->
  </div><!--eND container-->

So you see, the first chunk of code above has both the "container-fluid" and "container" class applied to it while the bottom chunk of code only has the class of container. Here is the jquery I have been working with

	//$(".panel-grid-cell").nextUntil(".stop").addBack().add(".stop")
       //   .wrapAll("<div class='container'></div>");

I thought what I could do was add a class of "start" and "stop" to the the cells them selves to give the jquery a "Hook" to latch onto. So it would add the class "container" right above the first cell with the class of start and add the ending div below the last cell with the class of "Finish". This almost worked but I could not get my jquery correct. Can you help me write some code that would work?

[dsonesuk]

Its discussed here https://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div an example would be

            $(function() {
                var target_divs = $('.panel-grid-cell');

                for (var i = 0; i < target_divs.length; i += 3) {
                    target_divs.slice(i, i + 3).wrapAll("<div class='container'></div>");
                }

            });

 

[JamieY]

Thank you. This does work