Add new row every set number of children
<p>I am trying to add a new row every 2 childrens and place 2 new childrens inside a new row each time. </p>

<p>The starting html:</p>

<pre><code>&lt;div class="row_1"&gt;&lt;/div&gt;
</code></pre>

<p>After the first run i get:</p>

<pre><code>&lt;div class="newRow"&gt;
   &lt;div class="span6" id="content"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row_1"&gt;&lt;/div&gt;
</code></pre>

<p>But as I keep adding I get:</p>

<pre><code>&lt;div class="newRow"&gt;
  &lt;div class="span6"&gt;...&lt;/div&gt;
  &lt;div class="span6" id="content"&gt;...&lt;/div&gt;
  &lt;div class="span6" id="content"&gt;&lt;/div&gt; &lt;== Empty extra div
&lt;/div&gt;
&lt;div class="newRow"&gt;&lt;/div&gt; &lt;== Empty extra div
&lt;div class="row_1"&gt;&lt;/div&gt;
</code></pre>

<p>Expected result would be</p>

<pre><code>&lt;div class="newRow"&gt;
  &lt;div class="span6"&gt;...&lt;/div&gt;
  &lt;div class="span6" id="content"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class="newRow"&gt;
  &lt;div class="span6"&gt;...&lt;/div&gt;
  &lt;div class="span6"&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row_1"&gt;&lt;/div&gt;
</code></pre>

<p>The following is the jQuery I am using</p>

<pre><code>$(".nav li a").on("click", function(e) {

$('#content').removeAttr('id');

var $row = $(".row_1");
var $rowNew = $('.newRow');

if($rowNew.length &lt; 2){
        $('&lt;div id="content" class="span6"&gt;&lt;/div&gt;').appendTo('.newRow');
} 

if ($rowNew.children().length &gt; 2) {
        $('&lt;div class="row-fluid new"&gt;&lt;/div&gt;').insertBefore($row);
}

else {
        $('&lt;div class="row-fluid new"&gt;&lt;/div&gt;').insertBefore($row);
        $('&lt;div id="content" class="span6"&gt;&lt;/div&gt;').appendTo('.newRow');
}
});
</code></pre>
