Laravel 5.4 + jScroll.js not working(no console errors)

I followed this tutorial with very close detail -> http://ift.tt/2uf66Eb

But my the infinite scroll doesn't seem to work - nothing happens when I scroll down through the entire page(even no console errors). I only have one item loaded that is loaded together when the page is loaded.

My Controller:

 public function photo()
{
    $photos = Photo::where('user_id', Auth::user()->id)
        ->paginate(1);
    return view('reports/photo')->with('photos',$photos);
}

View:

  <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="infinite-scroll">
                    @foreach($photos as $photo)
                        <h4 class="media-heading">
                            <small></small>
                        </h4>
                        
                        <hr>
                    @endforeach

                    
                </div>
            </div>
        </div>
    </div>

at the same file bottom:

      <script src="http://ift.tt/1MVunhH"></script>
                    <script src="/js/bootstrap.min.js"></script>
                    <script src="http://ift.tt/2uf66UH"></script>

<script type="text/javascript">

    $('ul.pagination').hide();
    $(function() {
        $('.infinite-scroll').jscroll({
            autoTrigger: true,
            debug: true,
            loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
            padding: 0,
            nextSelector: '.pagination li.active + li a',
            contentSelector: 'div.infinite-scroll',
            callback: function() {
                $('ul.pagination').remove();
            }
        });
    });
</script>

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2uNRXuP
via IFTTT