Multiple interval timers dependent on previous executed callbacks

First time poster,

I’m creating a simple mockup dashboard. At the moment my goal is to simply have a set of radio buttons which when clicked produce a set of ‘cards.’ The cards are either green if the status is ‘okay’ or red if the status is ‘not okay.’ This is easy enough for me, just set your input as the radio selection and output all the cards to a < div > - done.

However, the next piece of functionality which I wanted to add was a countdown/up timer within each of the cards. I’ve got one to work quite easily just using the interval timer at 1000ms and having its very own callback. But when we’re talking eight options on the radio button, each producing a new set of six cards, we’ve got 8 * 6 = 48 different < div > elements which need to be counting down/up.

Is my only option to literally create 48 different < div > id’s and 48 different callback functions??

For some context here is what one set of the cards looks like. The top right is the working timer, below it is just a placeholder, but as I mentioned preferably I’d want everything here (and on the other eight sets of cards) to have a uptime timer (if green), and countdown timer (if red).

I’d appreciate any help you could throw my way, and if you need me to explain anything further I’d be happy to!

A bit stuck here.

Cheers,
Troy