For counter variable not working in the if else statement

The i variable from the for counter works when getting each API for each Twitch streamer, however when I use it to generate divs it just comes out as 8. Is there a way I can make the counter work when getting the API data and iterating through the streamers?

$(document).ready(function(){

// streamers I want to look up

 var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]

// counts the number of streamers in the array

  for (var i = 0; i < streamers.length; i++){

// gets each streamer, one by one

  $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + streamers[i] +"?callback=?", function(json) {

//if they are not offline, pulls information from them and adds it to a div

if ((json.stream) !== null) {
  $("#results").prepend("<div class = \"resultsONLINE\">" + json.stream.channel.display_name + "</div>");

// if they are offline, marks them as offline

} else {
  $("#results").append("<div class = \"resultsOFFLINE\">" + streamers[i] + " is offline</div>");

}


  });

  };