Add new div in a nested HTML structure
<p>I have this html structure and code:</p>

<pre><code>&lt;ul class="navMore"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li href="#"&gt;&lt;a&gt;Link 2&lt;/a&gt;&lt;?li&gt;
&lt;/ul&gt;

&lt;div class="row-fluid"&gt;&lt;/div&gt;


$(".navMore li a").each(function() {
   $(this).on("click", function() {
        $('&lt;div class="row-fluid"&gt;&lt;/div&gt;').insertAfter($(this).closest('.row-fluid'));
        $('&lt;div id="content" class="span4"&gt;&lt;/div&gt;').insertAfter($(this).next('.row-fluid'));
   });
});
</code></pre>

<p>I need to add a new <code>.row-fluid</code> div just after the previous <code>.row-fluid</code></p>

<p>Expected result:</p>

<pre><code>&lt;ul class="navMore"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li href="#"&gt;&lt;a&gt;Link 2&lt;/a&gt;&lt;?li&gt;
&lt;/ul&gt;
&lt;div class="row-fluid"&gt;&lt;/div&gt;
&lt;div class="row-fluid"&gt;&lt;/div&gt;
</code></pre>

<p>But if we already added a new <code>.row-fluid</code> div, then the <code>#content</code> div should be put inside this newly added <code>row-fluid</code> div</p>

<p>How do I achieve this?</p>

<pre><code>&lt;ul class="navMore"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li href="#"&gt;&lt;a&gt;Link 2&lt;/a&gt;&lt;?li&gt;
&lt;/ul&gt;
    &lt;div class="row-fluid"&gt;&lt;/div&gt;
    &lt;div class="row-fluid"&gt;
        &lt;div id="content" class="span4"&gt;&lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Finally, how can I do that if we have inserted 3 <code>#content</code> div, start again with a new <code>.row-fluid</code> div and all again?</p>
