title: Clicking a button to display 5 more divs but only a max of 20 divs total should be shown?
body: <p>I'm trying to have my JS code allow a user to click the "Show 5 More" button to display 5 more "content-section" divs, and disable the button when a total of 20 'content-section' divs are displayed. I'm unsure why my code is not working? I do not have the code for a max of 20 divs, I'm unsure where to place 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;
  </code></pre>
  
  <p>
  </p>
  
  
      Show 5 More
  
  
  <p>JS </p>
  
  <pre><code>function showPreview () {
  
      if($('#show-more').on('click', function () {
          $('.content-section').append();
      }); 
  } 
  </code></pre>