Hello everyone, I have implemented the following code into my website

Code:
alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#content').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});
The div 'content' holds already a few divs, when the user hits the bottom of the screen, the new page (page2.html) loads into the 'content' div, they all load below as is expected.

Unfortunately, the page3.html (Which has the same content as 'page2.html) then loads below the footer... (which is set to position:relative; ) below everything else...

is there any reason why the next page would load into a different location?

Thanks!