Problems creating page elements in a loop

 for(vari = 0; i < json.length; i++) {    varTOPIC =Json[i]; varBTN = $ (' <button> ')); Btn.addclass (' Btn btn-primary '); Btn.attr (' Type ', ' button ');    Btn.html (topic.topiccomment); $.getjson (' Action.action ', {topicId:topic.p2pTopicId},function(res) {varJSN =$.parsejson (RES); varCNT =parseint (JSN); if(CNT > 0) {Btn.removeclass (' Btn-default '). addclass (' btn-primary ')); } Else{Btn.removeclass (' Btn-primary '). addclass (' Btn-default '));    }    }); $(' #hrAfterBtn '). before (BTN);}

This creates a problem, where the $.getjson is called after all the loops have ended,

So the Btn object is the last Btn object after the end of the loop;

You need to refine the creation process into a function:

 for (var i = 0; i < json.length; i++) {    var topic = Json[i];    Createmsgbutton (topic);} function Createmsgbutton (topic) {    var btn = $ (' <button> ');     // ...   }

Problems creating page elements in a loop