Ajax和for循环凌乱的结果

Question

想知道为什么在这段代码中所有.ajax结果都被塞进了最后一个div？

$(document).ready(function() {
  var nicks = ["com2ususa", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  for (var i = 0; i < nicks.length; i++) {
    var ni = nicks[i];
    $("body").append("<div id=" + ni + "></div>");
    $.ajax({
      url: "https://wind-bow.glitch.me/twitch-api/users/" + ni,
      success: function(result) {
        $("#" + ni).append("<img width='50px' src='" + result.logo + "'' />");
        $("#" + ni).append(result.display_name);
      }
    });
  };

});