Javascript code doesn't work as expected

Question

I am working on codepen on a project. Its actually freecodecamp project. In the code below, I am using twitch api to get data (i.e icon, url, status) about few channels. I have created a function ( mymain(key)) which takes one argument i.e. a key to decide the list of channels you want to see. If 1 is passed as argument it will show all channels. If 2 is passed as argument it will show only online channels. If 3 it will show only offline channels. It is getting data perfectly using jquery but the problem comes when I try to display it using key. All the three click statements in the bottom are always running and the buttons in html do not work.

//channel names variable initialization
    var channelNames = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas"];
    //parts of url to get data    
    var url1 ="https://wind-bow.gomix.me/twitch-api/channels/", url2 = "https://wind-bow.gomix.me/twitch-api/streams/", urlend="/?callback=?", htm="";

    //function mymain
    function mymain(key){
      channelNames.forEach(function(name){
        $.getJSON(url1+name+urlend,function(data){
          var Name = name, status="", icon = data.logo, channelWeb = data.url;
          var urltemp2 = url2+name+urlend, status = data.status,myvar = 1;//myvar is used to check if a channel is online
          $.getJSON(urltemp2,function(data){
            if (data.stream===null){
              status="Offline";
              myvar = 0;
            }
    //The code inside all the conditions is same.
    //for All channels this condition works
            if (key===1){
             htm = htm +"  <div class=\"box row\"><div class=\"images col-xs-1\"><img class=\"img-responsive img-circle\" src ="+icon+"></div><div class=\"text-left col-xs-4\"><a target=\"_blank\" href=\""+channelWeb+"\">"+Name+"</a></div><div class=\"text-center col-xs-7\">"+status+"</div></div><hr>"; 
            }

    //this condition is for online channels
            else if (key===2 && myvar===1){
            htm = htm +"  <div class=\"box row\"><div class=\"images col-xs-1\"><img class=\"img-responsive img-circle\" src ="+icon+"></div><div class=\"text-left col-xs-4\"><a target=\"_blank\" href=\""+channelWeb+"\">"+Name+"</a></div><div class=\"text-center col-xs-7\">"+status+"</div></div><hr>";
              
            }

    //this condition is for offline channels
        else if(status==="Offline"){
            htm = htm +"  <div class=\"box row\"><div class=\"images col-xs-1\"><img class=\"img-responsive img-circle\" src ="+icon+"></div><div class=\"text-left col-xs-4\"><a target=\"_blank\" href=\""+channelWeb+"\">"+Name+"</a></div><div class=\"text-center col-xs-7\">"+status+"</div></div><hr>";
            }
            $(".channelsInfo").html(htm);
          });
        });
      });
    }
    $(document).ready(mymain(1));
    $(".Online").click(mymain(2));
    $(".All").click(mymain(1));
    $(".Offline").click(mymain(3));

body{
  background-color:#222222;
  color:#AAAAAA;
}
#title{
  background-color:#4a4a4a;
  margin-top:3%;
}
img{
  width:50px;
}
.images{
 border-right: 3px solid grey;
}
.All:hover{
  color:blue;
}
.channelsInfo{
  background-color:#192345;
}
.box{
  margin:1%;
  padding:1%;
}
h1{
  padding:3%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="title" class="text-center ">
    <h1>Twitch Streamers</h1>
  </div>
  <div class="row text-left">
    <div class="All col-xs-1">
     <button> All</button>
    </div>
    <div class="Online col-xs-1">
      <button>   Online</button>
    </div>
    <div class="Offline col-xs-1">
      <button onclick="mymain(2)">Offline</button>
    </div>
    <div class="col-xs-9"></div>
  </div>
  <div class="channelsInfo">
  </div>
</div>