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

I followed this tutorial with very close detail -> https://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll

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">{{ $photo->photo_link }}
                            <small>{{ $photo->created_at->diffForHumans() }}</small>
                        </h4>
                        {{ $photo->photo_at }}
                        <hr>
                    @endforeach

                    {{ $photos->links() }}
                </div>
            </div>
        </div>
    </div>

at the same file bottom:

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
                    <script src="/js/bootstrap.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></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>