[FIXED] Unexpected problems with for loops in Twitch API project

Hello guys, I am doing the twitch api project on fcc, and everything pretty much came out very easy for me
Say I managed to finish almost everything in about 1 hour’s time.
The only thing that’s confusing right now is the stream status, I googled and found a code snippet, so now I know if a stream is online or offline. but I’ve having problems with my code right now. I think it’s mostly because of the for loop.

The loop is only standing at one point, that is one key instead of looping over. It’s working fine for the name and image but it’s not working for streams.
You can check the console output and see if there’s anything wrong

You can checkout my project here

The javascript code

  var users = ["roblox", "imaqtpie", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var holder = document.getElementsByClassName("holder")[0];
  var current = "";
  for (var i=0; i < users.length; i++){
    current = users[i]
    $.getJSON("https://wind-bow.gomix.me/twitch-api/users/"+ current, function(data){
      var can = document.createElement("div");
      can.className += "can";

      var img = document.createElement("div");
      img.className += "img";
      img.style.backgroundImage = "url(' " + data.logo + "')";

      var status = document.createElement("div");
      status.className += "status";

      $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + current,  function(streams){
        if (streams.stream == null){
          console.log(current + " is offline");
          status.className += " offline";
        } else {
          console.log(current + " is online");
          status.className += " online";

      var name = document.createElement("div");
      name.className += "name";
      name.innerHTML = "<center>" + data.name + "</center>";


      can.addEventListener("click", function(){
        window.open("https://www.twitch.tv/" + data.name);