Hi guys how do i stop my result from duplicating when i use the on-click event. I tried creating if statements saying if what is in the div is equal to the call from the api then it should delete whats in the div and replace with the api data but that does seem to work the way im doing it. Could someone point me on the right direction with this. codepen: https://codepen.io/chrism3ca/pen/wJbKQB
$(document).ready(function() {
// solution with call back function
var streamers = ["streamerhouse","ESL_SC2", "freecodecamp", "Test_channel"];
for (i=0; i < streamers.length; i++){
$.getJSON('https://wind-bow.glitch.me/twitch-api/streams/'+streamers[i]+'', callData);
function callData(data)
{
var textTile
$(document).on('click', '#offlineNow', function(){
if(data["stream"] === null){
$('#streamerOnline').empty()
textTile += data["_links"]["channel"]
}
});
$(document).on('click', '#onlineNow', function(){
if (data["stream"] !== null ){
$('#streamerOnline').append("<p>"+data["stream"]["channel"]["status"]+"</p>");
}
});
}
}
});