Tengo una lista de cosas por hacer. Para cada valor en mi lista, muestro un segmento y, en función de la hora actual frente al tiempo eta, se muestra un temporizador de cuenta regresiva, una vez que el temporizador llega a cero, muestra que expiró.

Esto funciona razonablemente bien para el primer elemento de la lista, pero no funciona para todos los elementos. ¿Cómo puedo hacer uso de mi JavaScript dentro del jinja for loop?

Donde Id = 1, 2, 3, 4, 5 ... n

propiedades pendientes

todo.id

html

 {% 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 = setIntervan(() => { 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 %}