Почему ставится одинаковый таймер?

Question

[Денис]

Здравствуйте , делаю TODO , и мне надо чтобы у меня при созданиий карточки с задачей , для каждой задачи ставился свой таймер , но выходит что ставится один для всех.

Код таймера:

function getTimeRemaining (endtime) {
        let t = Date.parse(endtime) - Date.parse(new Date()),
            seconds = Math.floor((t/1000) % 60),
            minutes = Math.floor((t/1000/60) % 60),
            hours = Math.floor((t/(1000*60*60)));
        
        return {
            'total' : t,
            'hours' : hours,
            'minutes' : minutes,
            'seconds' : seconds
        };
    }
    function timerTo () {
        function setTimer (id, endtime) {
            let timer = id,
                hours = timer.querySelector('.hours'),
                minutes = timer.querySelector('.minutes'),
                seconds = timer.querySelector('.seconds');
            let timerId = setInterval(update,1000);
    
            function update () {
                let time = getTimeRemaining(endtime);
                hours.textContent = time.hours,
                minutes.textContent = time.minutes,
                seconds.textContent = time.seconds;
    
                if (time.total <= 0) {
                    clearInterval(timerId);
                    hours.textContent = '00',
                    minutes.textContent = '00',
                    seconds.textContent = '00';
                }
                if (time.hours < 10 && time.total >= 0) {
                    hours.textContent = '0'+ time.hours;
                } 
                if (time.minutes < 10 && time.total >= 0) {
                    minutes.textContent = '0'+ time.minutes;
                } 
                if (time.seconds < 10 && time.total >= 0) {
                    seconds.textContent = '0'+ time.seconds;
                }
            }
        }
        setInterval(() =>{
            todo.querySelectorAll(".todo__block").forEach((item, i) => {
                todoArray.forEach(it =>{
                   console.log(item.querySelector(`#timer_${i}`));
                   console.log(it.date);
                   setTimer(item.querySelector(`#timer_${i}`), date.value); 
                });
                
            })
                
            
        }, 1000);
    }

Код добавления карточки:

todoArray.forEach(function(item,i) {
            item.remaining = getTimeRemaining(item.date);
            displayTask += `<li class="todo__block" id=item_${i}>
                                <div class="todo__close">&times;</div>
                                    <h1 class="todo__block-title">${item.title}</h1>
                                    <h3 class="todo__block-time"><span>Дата завершения:</span> ${item.date}</h3>
                                    <p class="todo__block-text">${item.todoText}</p>
                                    <div class="beforeend" id=timer_${i}>
                                        До конца выполнения:
                                        <span class="hours">${item.remaining.hours}</span>
                                        <span>:</span>
                                        <span class="minutes">${item.remaining.minutes}</span>
                                        <span>:</span>
                                        <span class="seconds">${item.remaining.seconds}</span>
				                    </div>
                            </li>`;
            todo.innerHTML = displayTask;
        });

Answer 1

[dcode]

setInterval(() =>{
            todo.querySelectorAll(".todo__block").forEach((item, i) => {
                //todoArray.forEach(it =>{
                //   console.log(item.querySelector(`#timer_${i}`));
                //   console.log(it.date);
                //   setTimer(item.querySelector(`#timer_${i}`), date.value); 
                //});
               setTimer(item.querySelector(`#timer_${i}`), todoArray[i].date); 
            })
        }, 1000);