Проект FCC Twitch API: цикл if-else внутри цикла не использует все возможности

Поэтому я делаю проект freeCodeCamp, который показывает информацию о конкретных стримерах. Я столкнулся с несколькими проблемами, касающимися операторов if внутри цикла for (я думаю).

Во-первых, статус всегда "Оффлайн" для каждого стримера, во-вторых, границы вокруг логотипов не меняются, кроме первого. Если это сработает, я все равно не уверен, будут ли цвета границы правильными (красный для офлайн-потоков, зеленый для онлайн).

Если вы внимательно посмотрите, что я сделал, я предоставил конкретный идентификатор для каждой итерации информации стримера, 1 для соответствующего изображения и 1 для статуса, поэтому я могу настроить их с помощью переменной я внутри оператора if.

Вот код JS, он лучше просматривается через Codepen, используя предоставленную мной ссылку, главным образом потому, что вы видите всю работу, и я не знаю, как правильно форматировать код, чтобы вам не пришлось использовать горизонтальную полосу прокрутки, чтобы увидеть длинную линий. :/

Заранее спасибо!

$(document).ready(function() {

  var channels = ["freecodecamp", "wudijo", "ThijsHS", "HSdogdog", "Sjow"]; 

  for (var i = 0; i < channels.length; i++) {
       var channelURL = "https://wind-bow.gomix.me/twitch-api/channels/"+ channels[i] +"?callback=?";
       var streamURL = "https://wind-bow.gomix.me/twitch-api/streams/"+ channels[i] +"?callback=?";

   $.getJSON(channelURL, function(data1) {

     var logo = data1.logo;
     var name = data1.display_name;
     var twitchLink = data1.url;
     var status;

   $.getJSON(streamURL, function(data2) {

         if (data2.stream === null) {
           status = "Offline"; 
            }
         else {
           status = data2.stream.channel.status;
            }

    $("#followerInfo").append("<div class = 'row'><div class = 'col-md-4'><a href = '"+ twitchLink +"' target = 'blank'><img id = 'img"+ i +"' src = '"+ logo +"'></a></div><div class = 'col-md-4'><p>" + name + "</p></div><div class = 'col-md-4'><p id = 'status"+ i +"'>" + status + "</p></div></div>");

         if (data2.stream === null) {
           $("#img"+ i +"").addClass('img-offline');
          }
         else {
           $("#img"+ i +"").addClass('img-online');
          }

        });           
     });

 }

});