title: How to hide Load more button if less product on page
body: <p>I am using PHP with a prepared statement. I am fetching the data from the database and display on the page. </p>
  
  <p>Now on page load, I have to display only four <code>li</code> and reset of the <code>li</code> should be displayed after a click on <code>load more</code> button</p>
  
  <p><strong>Index</strong></p>
  
  <pre><code>&lt;?php $numberofrows = $stmt-&gt;num_rows;?&gt;
      &lt;ul id="a-p-AllList"&gt;
        &lt;?php while ($stmt-&gt;fetch()) {?&gt;
        &lt;li&gt;
          &lt;div class="a-product-content"&gt;
            &lt;h3&gt;
              &lt;?php echo $subproduct_name?&gt;
            &lt;/h3&gt;
            &lt;div class="a-heroCTA btn_pviewMore"&gt;
              &lt;?php if (($category_id==3) || ($category_id==4)){?&gt;
              &lt;a href="assets/images/pdf/&lt;?php echo $_GET['category'];?&gt;/&lt;?php echo $pdfname;?&gt;" class="viewproductList" download&gt;&lt;strong&gt;Download PDF&lt;/strong&gt; &lt;i class="fas fa-chevron-circle-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;?php } else{?&gt;
              &lt;a href="product-view?key=&lt;?php echo $id?&gt;&amp;category=&lt;?php echo $slug ?&gt;" class="viewproductList"&gt;&lt;strong&gt;View More&lt;/strong&gt; &lt;i class="fas fa-chevron-circle-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;?php }?&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  
        &lt;?php } ?&gt;
      &lt;/ul&gt;
      &lt;div id="loadMore" class="text-center"&gt;Load more&lt;/div&gt;
      &lt;?php } $stmt-&gt;close();?&gt;
  </code></pre>
  
  <p><strong>script</strong></p>
  
  <pre><code>$(document).ready(function() {
    var init_item = 4;
    var items = "&lt;?php echo $numberofrows; ?&gt;";
    var shown = 4;
    $('#a-p-AllList li:lt(' + init_item + ')').show();//on page load displaying 4 li
    $('#loadMore').click(function() {
      shown = $('#a-p-AllList li:visible').length + 4;
      if (shown &lt; items) {
        $('#a-p-AllList li:lt(' + shown + ')').show();
      } else {
        $('#a-p-AllList li:lt(' + items + ')').show();
        $('#loadMore').hide();
      }
    });
  
    // if (init_item&gt;=4) {
    //  // alert('true');
    //    $('#loadMore').hide();
    // }
  
  });
  </code></pre>
  
  <p>Above code is working if I have more then 4 products and load more button hide at the end if there is no product but If I have less then 4 products then load more button is still showing on the screen. I don't want to display load more button if I have less then 4 products on screen.</p>