Having some trouble with jQuery/my twitch.tv app. Any suggestions?

Hello FCC,

I’m working on building my twitch.tv app. As it stands, I currently have all of the data I need to gather from the API so I am working on displaying it in an interesting way.

My concept was to have my app look like a mobile phone. The user is first presented with a bunch of icons (icons page). When the user clicks the twitch icon on the phone I want the app info to be displayed on the phone screen (who is online, offline, streaming or not etc). When the user clicks the bottom “home” button on the phone I want the icons page to be displayed again.

Right now all I am trying to do is implement is:
-user clicks twitch icon
-screen clears
-users clicks home button on bottom of phone
-screen is populated with same icon page

let iconHtml = $('.icon-container').html(); 
//html that displays my icon screen. capture for later

//when clicked, remove all the icons (and later display app)

//when home button is clicked, display the icons on screen again

This code does not behave how I expect it to. When I click the twitch icon the screen does clear. The FIRST TIME I click the home button the icons DO reappear on the screen. Then, if i click the twitch icon AGAIN (2nd time) the screen will not clear. I have checked with a console.log() and the “click” event does NOT register after the screen has been cleared once and the HTML reappended.

What I think is happening here is that when I reappend the html elements i stored in var iconHtml jQuery somehow loses reference to the selector, so the second click event is never heard (though i may be wrong).

Could anyone give me some guidance in tackling this problem? I realize that this may be hard to visualize so you can check out the codepen here: twitch tv application

I commented out all my JS code that handles API calls. So the code that is uncommented is the code in question.

Thanks a lot FCC and happy coding / happy holidays

This worked! Thanks very much ejuor.