Custom Ajax Page Loading Shopify Collection Page?

Question

I am trying to build a simple solution on shopify, where i click the 'View More' link and my ajax will pull data from the next page and display it on my current collection page without changing the page.

I have this working to the most simplistic approach below, however i am trying change this so after each page it will add another div for the next request. It should be like this:

1. User scrolls to bottom and clicks View More link.
2. Data is shown in the first div supplied.
3. User clicks View More again
4. Data is shown from the next page after previous

I hope that makes sense. I presume i need to implement some kind of counter and use that counter as the page number in my ajax query, but i am unsure how to do that as well as create a NEW div after each query where the next data will be inserted.

Here is my Code so far:

$(document).ready(function() {
$('#more p a').click(function(e) {
  e.preventDefault();
  $.ajax({
     url: 'https://url.myshopify.com/collections/all?page=2',
     type:'GET',
     success: function(data){
         $('#ajax-content-2').html($(data).find('.collection-wrapper').html());
     }
  });
});
});

Answer 1

Okay so since i didnt really get any response i just wrote my own, Its very basic but it works.

Jquery:

$(document).ready(function() {
    var counter = 2
    var pages = Math.ceil('{{ collection.all_products_count }}' / {{ settings.products_per_page }});
    var maxCount = pages + 1;
    console.log("Pages Found: " + pages);

    console.log("Collection Title: {{ collection.handle }}");

    $('#more p a').click(function(e) {

        e.preventDefault();
        var getUrl = "site.myshopify.com/collections/{{ collection.handle }}?page="+counter;

        $.ajax({
             url: getUrl,
             type:'GET',
             success: function(data){
                $("#ajax-content-"+counter).html($(data).find('.collection-wrapper').html());
                counter++;
                var oldCount = counter - 1;
                $("#ajax-content-"+oldCount).append("<div id='ajax-content-"+counter+"'></div>");

                if(counter == maxCount ) {
                    $('#more').empty();
                }

             }
        });
    });
});

If you see anything that could be improved here please let me know :)