Display array items in jquery or hide twitch API

1

First off here is a link to my codepen

I am trying to display the most popular items when clicking the most popular tab. As of right now the tab just adds more array items the more you click on it.

What I would like, is for the array to append to the “p” element in the html once. If that element is clicked on again the items should not be appended again to the html element.

Another thing I am wondering is how to evenly space all the usernames on the page. For example have a 5% margin between each element.

The visual look I am trying to get is have 3 usernames display on each row and their profile picture on top of there username. for example:

profilePic . profilePic profilePic
userName userName userName

profilePic . profilePic profilePic
userName userName userName

profilePic . profilePic profilePic
userName userName userName

if you can help that would be appreciated.

2

hi, I would clearvthevzarget element and re-add all the content again.
Are you seriously appending divs on to a p element?

  $("#mostPop").click(function(){
        $("p").append("div class=user>" + freeCodeUsers[i] "</div>" );
3

It looks like it. I was just trying stuff out.