API Styling Javascript + HTML

Question

Basically I'm using bootstrap CSS with the panels / headers

I have an API going from Twitch.tv's Kraken that grabs 3 streams

My problem is it shows the 3 streams in the one box

http://jsfiddle.net/82wNq/28/

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"><div id="content1"></div> - <div id="content2"></div></h3>
  </div>
  <div class="panel-body">
    <div id="content3"></div>
  </div>
</div>

If anyone could give me any pointers I'd be really greatful

Answer 1

You are adding all elements together in loop.

Re-Create elements & add separately.

DEMO: http://jsfiddle.net/82wNq/30/show/

CODE: http://jsfiddle.net/82wNq/30/

    function (data) {
    var temp = "";
    $.each(data.streams, function (index, item) {
        temp = temp + "<div class='panel-heading'><h3 class='panel-title'></h3><div id='content1'>" + item.channel.display_name + "</div><div id='content2'>" + item.viewers + "</div></div><div class='panel-body'><div id='content3'><img src='" + item.preview.medium + "'/></div></div>";
    });
    $("#content").html(temp); }