How to use my own element in Waypoints Infinite Scrolling?

[firaki12345]

Hi so i want to use my own element in the below JS script ? but it does not do anything

var infinite = new Waypoint.Infinite({

    element: $('infinite.container')[0],

    offset: 'bottom-in-view',

    onBeforePageLoad: function () {
        $('.loader').show();
    },

    onAfterPageLoad: function ($items) {
        $('.loader').hide();
    }

});

I want to replace and add element: $(’.container’)[0],

but it does not do anything

My html code

<main>

  <div class="container">

    <div class="gallery">

     {% for items in prods %}

      <div class="gallery-item" tabindex="0">

        <img src="{{items.image.url}}" class="gallery-image" alt="">

        <div class="gallery-item-info">

          <ul>
            <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden="true"></i> 56</li>
            <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fas fa-comment" aria-hidden="true"></i> 2</li>
          </ul>

        </div>

      </div>
      
        {% endfor %}

    </div>
    <!-- End of gallery -->

{% if prods.has_next %}

  <a class="infinite-more-link" href="?page={{ prods.next_page_number }}">More</a>

{% endif %}

    <div class="loader"></div>

  </div>
  <!-- End of container -->

</main>

so the above html shows 6 images but i want to scroll down and show more as they are added (Infinite scrolling) Please Help

The library i am Using:
http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/