jScroll.js nextSelector not found - destroying

Question

I'm trying to implement infinite scroll with jScroll.js and Laravel 5.7. my code below as far as I followed all the tutorials and all the questions and answers on Stackoverflow I can't get it to work. on the console it gives jScroll: nextSelector not found - destroying

<div class="infinite-scroll">
  @foreach ($products as $category_products)
  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a href="/product/{{ $category_products->slug }}">
      <div class="shadow card mb-2">
        <!--Card image-->
        <div class="view overlay">
          <img class="card-img-top" src="{{ Storage::url($category_products->photos()->first()->filename) }}" alt="{{ $category_products->name }}" />
          <a href="/product/{{ $category_products->slug }}">
            <div class="mask rgba-white-slight"></div>
          </a>
        </div>

        <!--Card content-->
        <div class="card-body">
          <!--Title-->
          <h4 class="card-title notokufi">{{ $category_products->name }}</h4>
          <!--Text-->
          <p class="card-text notonaskh">
            {{ $category_products->description }}
          </p>
          <div class="row">
            <div class="col">
              <p><span class="text-accent">نرخ: {{ $category_products->display_price }}</span></p>
            </div>
            <div class="col">
              <p class="float-right">شار: {{ $category_products->city->name }}</p>
            </div>
          </div>
        </div>
      </div>
    </a>
  </div>
  @endforeach
  {{ $products->links() }}
</div>

Javascript Code:

<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
    $('.infinite-scroll').jscroll({
        autoTrigger: true,
        debug: true,
        loadingHtml: '<img class="center-block" src="http://demo.itsolutionstuff.com/plugin/loader.gif" alt="Loading..." />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH
        padding: 0,
        nextSelector: '.pagination li.active + li a',
        contentSelector: 'div.infinite-scroll',
        callback: function() {
            $('ul.pagination').remove();
        }
    });
});

And that's the DOM for pagination but it's hidden, But since I'm not a javascript developer I may not know about the DOM and I don't understand it much.

<ul class="pagination" role="navigation">
  <li class="page-item disabled" aria-disabled="true" aria-label="« Pre">
    <span class="page-link" aria-hidden="true">‹</span>
  </li>

  <li class="active"><a href="#">1</a></li>

  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=3"
      >3</a
    >
  </li>
  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=4"
      >4</a
    >
  </li>
  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=5"
      >5</a
    >
  </li>
  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=6"
      >6</a
    >
  </li>
  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=7"
      >7</a
    >
  </li>
  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=8"
      >8</a
    >
  </li>

  <li class="page-item disabled" aria-disabled="true">
    <span class="page-link">...</span>
  </li>

  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=22"
      >22</a
    >
  </li>
  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=23"
      >23</a
    >
  </li>

  <li class="page-item">
    <a
      class="page-link"
      href="http://example.com/product/example?page=2"
      rel="next"
      aria-label="Next »"
      >›</a
    >
  </li>
</ul>