Very Curious!!!

// work on input section
// work on buttons

$(document).ready(function () {
// twitchers list(array)
var twitchers = ["freecodecamp",  "MEDRYBW", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
  // variables
 var name;
 var statusSign;
 var logo;
  var status;
  var statusOF;

  // input field(working on it)
  $('#search').keyup(function(){
    var input = $(this).val().toLowerCase();

  });//end keyup

  // loop through the twithers
  twitchers.forEach(function(user) {
    // channel endpoint url
var channelUrl ="https://api.twitch.tv/kraken/channels/"+user+ '?callback=?';
    // streams endpoint url
var streamUrl = "https://api.twitch.tv/kraken/streams/"+ user+'?callback=?';

    // get json
    $.getJSON(channelUrl, function(channel) {
      $.getJSON(streamUrl ,function(stream) {
        // if twitcher is not streaming
        if(stream.stream == null) {
          // add particular img
          statusSign = '<i class="fa fa-times fa-2x offline"></i>';      //offline class because not streaming
          // not streaming -just displaying it
          status = "Currently Not Streaming";
          // simply means twitcher is offline
          statusOF ="Offline"
 // if twitcher is streaming same steps with a different icon
        } else {
          statusSign = '<i class="fa fa-check fa-2x online"></i>';
          status=channel.status;
          statusOF ="Online";
        }
        // storing display name into a variable for ease of use
        name = channel.display_name;
    // if twitcher has no logo, use a default img
        if (channel.logo == null) {
          channel.logo = 'http://www.trickyladygaming.com/wp-content/uploads/2015/10/Twitch-Icon-150x150.png'
        } 
 // time to see some action
 // created html variable to gather the information
// later append it to the div with id main-section        
var html = '<div class="sub-section">';                    // sub-section class
html+= '<ul><li>';
html += '<img src="'+channel.logo+'">';
html+= '<span class="title">Title: ';
html+= '<a href="https://www.twitch.tv/'+user+'">'+name+'</a></span><br>';
html+= statusSign;
html+= '<span class="statusOF">'+statusOF+'</span><br>';
html+= '<span class="status">'+status+'</span></li></ul></div>'        

// append it to the document
 $(html).appendTo("#main-section");


    // working on buttons    
   $('#online').click(function(){
      $(".sub-section").each(function() {
      if ($(this).hasClass('offline')) {
        $(this).hide();
      } else {
        $(this).show();
      }
      });
   });


      })// end streams json
    })// end channels json
  });// end each
}); // end ready

 $('#online').click(function(){
      $(".sub-section").each(function() {
      if ($(this).hasClass('offline')) {
        $(this).hide();
      } else {
        $(this).show();
      }
      });
   });