js arrays|objects to make a live youtube sub counter

Question

Ok, so I challenged myself to make a youtube live sub counter for multiple channels. And I did. https://nitrotypelivesubcount.205135tmd.repl.co/

Now I need to make to where the channels sort themselves automatically from top to bottom. Like... the people with most subscribers go at the top, with least go at the bottom.

now if you look at the website (link above), the 3rd channel should be in second place, because the subscriber count is greater than the second one. now i could manually change the rank (see code below to see what the rank is), but I don't want to be checking the website everyday checking to see who should be on top. I want it to do that automatically.

Now this might be a little hard to understand because I can't give you a code that would display an actual output, becaues of the API key (should be secret), but I removed the API key, and we can just visualize ... i guess..
This is the code I used for the website (just 4 channels to simplify the code):
https://code.sololearn.com/W5nz1BzrOxI1/#js

Now I'm not really expecting a straight forward answer, since you aren't able to see actual output (since API key is missing), I'm looking for suggestions, or tips on how I can arrange this code.. or like how I can use loops to do this, maybe objects...?

I just remodified the code above trying to make it rearrange the channel's subscribers count, icon, and name automatically:
This is the actual code that I'm working on right now to make it automatic..
https://code.sololearn.com/WO83h6BP4u2j/#js

Answer 1

<div class = "name"> </div>
<img src = "" class = "icon">
<div class = "sub-count"> </div>

<div class = "name"> </div>
<img src = "" class = "icon">
<div class = "sub-count"> </div>

<div class = "name"> </div>
<img src = "" class = "icon">
<div class = "sub-count"> </div>

take the above HTML code for example.
and js below..
___
chan1id: "abcd"
chan2id: "efg"
chan3id: "xyz".

get subscribers count of each channel above.
example:
chan1: 5 subs;
chan2: 7 subs;
chan3: 6 subs;

now .sort:

chan1: 5 subs
chan3: 6 sbs
chan2: 7 subs

now reverse that. (.reverse()

chan2: 7 subs
chan3: 6 subs
chan1: 5 subs.

now get the index of each channel;
chan2: 0
chan3: 1
chan1: 2

now .name[chan2's index].innerHTML = fetch("...api..).
.icon[chan2's index].src = "...
.sub-count[chan 2's index].innerHTML = "..."

same thing for the other channels...

.name[chan1's index].innerHTML = the name of channel from api....
.icon[chan1's index].src = "...
.sub-count[chan 1's index].innerHTML = "..."