JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>

<div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-12 center-column">
    <h3>Twitch.tv Viewer</h3>
    <div class="row">
      <div class="col-sm-2" id="title"></div>
      <a href="" id="link" target="_blank" style="text-decoration:none;"><div id="status"></div></a>
    </div>
  </div>
  <div class="col-sm-3"></div>
</div>

JavaScript

var channels = ["ESL_SC2", "freecodecamp", "OgamingSC2", "noobs2ninjas"];

var ci = 0; // Channel index
(function getChannels(){
    if(ci >= channels.length)
        return; // Stop the recursion if we've iterated all channels
    $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + channels[ci] + "?callback=?", function(json) {
        var json = JSON.stringify(json);
        var obj = JSON.parse(json);
        var streamStatus = obj.stream;
        if (streamStatus === null) {
            streamStatus = "Offline";
        }
        else {
            streamStatus = "Streaming " + obj.stream.channel.status;
        }
        var para = document.createElement("div");
        var node = document.createTextNode(streamStatus);
        para.appendChild(node);
        var element = document.getElementById("status");
        element.appendChild(para);
        ci++;
        getChannels();
    });
    var para = document.createElement("div");
    var node = document.createTextNode(channels[ci]);
    para.appendChild(node);
    var element = document.getElementById("title");
    element.appendChild(para);
})();