title: Wrap everything beyond 3rd div in another div
body: <p>I need to place a wrapper around all modules past the 2nd module.  </p>
  
  <pre><code>&lt;div class="show"&gt;
      &lt;div class="module"&gt;some content&lt;/div&gt;
      &lt;div class="module"&gt;some content&lt;/div&gt;
      &lt;div class="module"&gt;some content&lt;/div&gt;
      &lt;div class="module"&gt;some content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I need is </p>
  
  <pre><code>&lt;div class="show"&gt;
      &lt;div class="module"&gt;some content&lt;/div&gt;
      &lt;div class="module"&gt;some content&lt;/div&gt;
  
       &lt;h4 class="more"&gt;View More&lt;/h4&gt;
      &lt;div class="show-more"&gt;
          &lt;div class="module"&gt;some content&lt;/div&gt;
          &lt;div class="module"&gt;some content&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can count the number of modules but I'm not sure how to append/prepend the html to the divs beyond the 1 index. </p>
  
  <pre><code>$('.show').each(function(i) { 
          var n = $(this).children('.module').length;
      });
  </code></pre>
  
  <p>I should mention that I multiple "show" divs that each need have their own modules.  So it needs to happen on each "show" div seperately.  A loop maybe?</p>