title: Appending 5 divs at once?
body: <p>My code runs below so that the correct div is appended to the page when I click the '.show-more' button. I want to be able to append 5 of these divs every time I click this button, but not sure how to do that?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="content-section news-preview clearfix"&gt;
      &lt;div class="title"&gt;Title of News Article&lt;/div&gt;
      &lt;div class="clearfix"&gt;
          &lt;div class="image-container"&gt;
              &lt;img src="images/news_sample208x135.jpg" width="208" height="135"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dui luctus lectus eget libero volupat, a tempor velit malesuada. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vivamus mattis egestas lorem a sodales.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="article-link"&gt;http://www.lintothenewsarticle.com/news/article/title-of-news-article&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- /content-section --&gt;
  &lt;div class="show-more-container"&gt;
      &lt;div id="content-news-container"&gt;&lt;/div&gt;
      &lt;button class="btn show-more"&gt;Show 5 More&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('.show-more').click(function() {
      var contentNews = $('div.content-section:last').prop('outerHTML');
  
      console.log("contentNews", contentNews);
  
      $('#content-news-container').append(contentNews).slideDown(slow);
  });
  </code></pre>