迭代Ajax负载选择器

Question

I am trying to create an 'infinite scroll' using Ajax (or rather specifically using Jquery's .load function), the function fires perfectly and in the instances where it has worked it spits out a comical amount of articles, so I figured that I should create a unique, iterating div (id1,id2,id3 etc) but when using an iterating selector to load the Ajax content into unique div ids, by iterating it, it .load fails or doesn't fire.

var busy = false;
var i = 1;
var x = 0;

function content(){
if($(document).height() * 0.7 < $(document).scrollTop() && !busy) {
var offset = i++ * 6;
$("#expand").after("<section id='expand" + x++ + "' class='gridWrapper'></section>");

$("#expand" + x).load("/ajaxcontent/", {section: 'articles', category: '', limit: '6', offset: offset, form: 'grid', action: 'article'}, function(){
busy = true;
}); 
    x++                                     
} else {
   busy = false;
}
}   

window.onscroll = content;
document.ready = content; 

My question is how do I get the selector $("#expand" + x) to work correctly? In the variations (for loops, while loops, .each) I have tried where it does output articles it goes utterly bananas and essentially regurgitates all articles. Any help would be hugely appreciated!

(As it is a an Ajax load, I don't think that I can create a JsFiddle)

Answer 1

This is working

$('#expand' + x)

try to remove the ++ in this line

$("#expand").after("<section id='expand" + x++ + "' class='gridWrapper'></section>");

to

$("#expand").after("<section id='expand" + x + "' class='gridWrapper'></section>");