Pagination working but Infinite scroll not working

Pagination working perfectly, but I want to move next page when user scroll down. Please correct my code.

Here is my html code

<div class="form-group col-md-8 col-md-offset-1">
  <div class="row">
    <div id="content" class="col-md-12">
      @if(count($hotel_list) > 0)   
        @foreach($hotel_list as $hotel)
          <a href="/hotels/hotel-details?hotel=">
            <div class="row hotel-details">
              <div class="col-md-4"><img src="/uploads/"></div>
              <div class="col-md-5">
                <div class="hotel-name"></div>
                <div class="hotel-address">
                  
                </div>
                <div class="hotel-location"><i class="fa fa-map-marker fa-1x" aria-hidden="true"></i> LOCATE HOTEL</div>
              </div>
              <div class="col-md-3 text-right">
                <div><span class="hotel-rate">Rs.  </span></div>
              </div>
            </div>
          </a>
        @endforeach
       @endif
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 text-center">
    {!! $hotel_list->render() !!}
  </div>
</div>

JS

var loading_options = {
  finishedMsg: "<div class='end-msg'>Congratulations! You've reached the end of the internet</div>",
  msgText: "<div class='center'>Loading news items...</div>",
  img: "/img/image_loader.gif"
};
$('#content').infinitescroll({
  loading: loading_options,
  navSelector: "div",
  nextSelector: "div a:first",
  itemSelector: "#content a"
});

via Chebli Mohamed