I have a todo list. For each value in my list I show a segment and based on the current time vs. eta time a countdown timer shows, once the timer hits zero it shows expired.

This works reasonably well for the first item in the list but doesn't work for every item. How can I make use of my JavaScript inside of the jinja for loop?

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

todo properties

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 %}