title: Make Load more Button disappear after fetching all data
body: <p>My code works fine, it displays more users when the load more button is clicked. 
  my constraint right now is how to remove the Load more button if there is no more value on the response. </p>
  
  <p>This is how my model looks like </p>
  
  <pre><code> public function getFreeAds($page){
          $offset = 10*$page;
          $limit = 10;
          $this-&gt;db-&gt;select('*');
          $this-&gt;db-&gt;from('escort');
          $this-&gt;db-&gt;where('status', 'Approved');
          $this-&gt;db-&gt;limit($offset ,$limit);
          $this-&gt;db-&gt;order_by("time_stamp, UPPER(time_stamp)", "DESC");
          $query = $this-&gt;db-&gt;get();
          return $query-&gt;result();
      }
  </code></pre>
  
  <p>My Controller looks like this </p>
  
  <pre><code> public function getCountry(){
          $page =  $_GET['page'];
          $countries = $this-&gt;Home_model-&gt;getCountry($page);
          foreach($countries as $country){
              echo 
                   '&lt;div class="col-md-4 col-sm-6"&gt;
                      &lt;div class="portfolio-item"&gt;
                       &lt;div class="thumb"&gt;
                      &lt;a &gt;&lt;div class="hover-effect" data-e_id="'.$country-&gt;e_id.'" id="profile2"&gt;
                      &lt;div class="hover-content"&gt;
                      &lt;h1&gt; '.$country-&gt;ProfileName.'&lt;/em&gt;&lt;/h1&gt;
                       &lt;p&gt; '.$country-&gt;Height.' CM tall '.$country-&gt;BreastCup.'  Breast Size &lt;b&gt;Nationality: '.$country-&gt;Nationality.' &lt;/b&gt;&lt;/p&gt;
                       &lt;button  type="button"  class="btn-info"&gt;View More&lt;/button&gt;
                       &lt;button  type="button"  class="'.$country-&gt;confirmstatus.'"&gt;'.$country-&gt;confirmstatus.'&lt;/button&gt;
                       &lt;div class="top"&gt;
                       &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;/div&gt;&lt;/a&gt;
                       &lt;div class="image" width="70%" height="1000px"&gt;
                       &lt;img src="uploads/'.$country-&gt;ProfilePicture.'"&gt;
                       &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;/div&gt;
                      &lt;/div&gt;';
          }
          exit;
      }
  </code></pre>
  
  <p>Here is my query code that displays the response. </p>
  
  <pre><code>$(document).ready(function(){
          getcountry(0);
  
          $("#load_more").click(function(e){
              e.preventDefault();
              var page = $(this).data('val');
              getcountry(page);
  
          });
  
      });
  
      var getcountry = function(page){
          $("#loader").show();
          $.ajax({
              url:"&lt;?php echo base_url() ?&gt;Home/getCountry",
              type:'GET',
              data: {page:page}
          }).done(function(response){
              $("#show_data").append(response);
              $("#loader").hide();
              $('#load_more').data('val', ($('#load_more').data('val')+1));
              scroll();
          });
      };
  
      var scroll  = function(){
          $('html, body').animate({
              scrollTop: $('#load_more').offset().top
          }, 1000);
      };
  </code></pre>