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: 
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/)
despite the fact that you have `<li>` elements in the "wrong" place, browsers wont just ignore them and you can still manipulate them

```
var div = document.querySelector('.col-md-4.JS-columnGrid');
var lis = div.querySelectorAll('li');
var newDiv = document.createElement('div');
newDiv.className = 'col-md-3';
for (var i = 3; i < lis.length; i++) {
    newDiv.appendChild(lis[i]);
}
div.parentElement.insertBefore(newDiv, div.nextElementSibling);

```

That will do what you want