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 try this:

```
$(function(){

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

    $(".JS-columnGrid > li").each(function(){
        cutoffArray.push(this);
    });

    $('.JS-columnGrid').after($col);
    $(cutoffArray[3]).appendTo($col);

});

```

[Working fiddle](https://jsfiddle.net/bj9w36r9/1/)

Updated answer: 

if you want to add more li's change the above to this:

```
var $col = $('<div class="col-md-3"></div>');

$('.JS-columnGrid').after($col);
$(".JS-columnGrid > li").each(function(index){
    if(index > 2) {
         $col.append($(this));   
    }
});

```

[updated fiddle](https://jsfiddle.net/bj9w36r9/2/)