I have a web page that displays todo lists as seperate div's/segments. On each todo item is a countdown clock controlled by JavaScript. I can have multiple items in my todo list and would like multiple countdown clocks (one for each item)

The JS runs correctly for the first item in the list but not multiple items. If I delete the first item with a countdown clock then the second item's clock shows and starts counting down.

How can I make use of the same script for each item in my todo list?

Can I turn it into a function that is called within my loop passing the ID? I have tried this but can't get it to work.

My best example is simplified below.

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