Question: I have a list of items that I want to be inside multiple columns. These columns can be arbitrary based on a series of factors so there's some other stuff going on. Unfortunately I'm getting tricked up on how to close the containing div.

Let's say I have a structure like this:

```
<div class="col-md-4 JS-columnGrid">
    <li>one</li>
    <li>two</li>
    <li>three</li>
<!--</div>-->
<!--<div class="col-md-4">-->
    <li>four</li>    
</div>

```

I want to close the col-md-4 div after the third list element, and wrap the fourth list element in another div class="col-md-4">

This would create two columns.

Here's some javascript that would grab each list, throw it into an array and then my intention is that I can use that array to decide where I'm going to cut the column.

```
   var cutoffArray = [];
    $(".JS-columnGrid > li").each(function(){
        cutoffArray.push(this);
        console.log(cutoffArray);
    });

    $(cutoffArray[3]).before("</div><div class='col-md-3'>");

```

Unfortunately this is the output HTML after this:

```
<div class="col-md-4 JS-columnGrid">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <div class="col-md-3"></div>
    <li>four</li>    
</div>

```

Where am I going wrong?

Answer: 
```
// select and remove all the elements you want to re-package
var $lis = $(".col-md-4.JS-columnGrid li").remove(), 
    i,
    divs = [];

$(".outer-container").empty();

// slice into packs of three and append each pack to container
for (i = 0; i < $lis.length; i += 3) {
    $("<div class='col-md-3'></div>")
        .append( $lis.slice(i, i + 3) )
        .appendTo(".outer-container");
}

```
You can't use `"</div><div>"` in `.before()` etc, since the argument is expected to be one or more properly formatted HTML elements (or plain text). You're working on the DOM here, not plain text, and the textual HTML representation of the argument is purely convenience.

You could instead simply **move** the elements:

```
    var els = $('.JS-columnGrid > li');
    var x = $( "<div class='col-md-4 JS-columnGrid'></div>" );
    els.parent().after( x );

    for (var i = 0; i < els.length; i ++ )
      if ( i >= 3 )
        x.append( els[i] );

```