Tengo una página web que muestra listas de tareas como div/segmentos separados. En cada elemento de tareas hay un reloj de cuenta regresiva controlado por JavaScript. Puedo tener varios elementos en mi lista de tareas pendientes y me gustaría tener varios relojes de cuenta regresiva (uno para cada elemento)

El JS se ejecuta correctamente para el primer elemento de la lista, pero no para varios elementos. Si elimino el primer elemento con un reloj de cuenta regresiva, aparece el reloj del segundo elemento y comienza la cuenta regresiva.

¿Cómo puedo utilizar el mismo script para cada elemento de mi lista de tareas pendientes?

¿Puedo convertirlo en una función que se llama dentro de mi ciclo pasando la ID? He intentado esto pero no puedo hacer que funcione.

Mi mejor ejemplo se simplifica a continuación.

 {% for todo in todo_list} // div sections (each section should have its own independent countdown timer) <div id="segment/{{todo.id}}"> <div id="diff-{{todo.id}}"> // JavaScript inside for loop // Script to run for each item in todo list and update the div with time/expired based on the todo.id <script> var diff = document.getElementById('diff-{{todo.id}}'); var now = moment.utc().format("YYYY-MM-DD HH:mm:ss"); var input_time = '{{todo.created_on}}'; var exam_end_time ='{{todo.eta}}' var mins = moment.utc(moment(exam_end_time, "HH:mm"),diff(moment(now, "HH:mm"))).format("mm") var frequency = mins*60 var refreshIntervalId = setInterval(() => { const formatted = moment.utc(frequency--*1000.format("mm:ss"); diff.innerHTML = formatted; }, 1000; setTimeout(() => { if(mins === ) { diff.innerHTML = "Expired"; clearInterval(refreshIntervalId); }},frequency*1000; </script> </div> </div> {% endfor %}