Таймер обратного отсчета для нескольких элементов с одним классом?

Question

[vladzvezdin]

Проблема вот в чем. Я создал таймеры обратного отсчета. Их может быть несколько и соответственно даты разные.

Отсчет ведется до указанной даты в атрибуте "data-finish"

<div class="timer" data-finish="2019.09.19 00:00:00">
  <div class="timer_section">
    <div class="days_1">0</div>
    <div class="days_2">0</div>
    <div class="timer_section_desc">дней</div>
    
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="hours_1">0</div>
    <div class="hours_2">0</div>
    <div class="timer_section_desc">часов</div>
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="minutes_1">0</div>
    <div class="minutes_2">0</div>
    <div class="timer_section_desc">минут</div>
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="seconds_1">0</div>
    <div class="seconds_2">0</div>
    <div class="timer_section_desc">секунд</div>
  </div>
</div>



<div class="timer" data-finish="2019.09.21 00:00:00">
  <div class="timer_section">
    <div class="days_1">0</div>
    <div class="days_2">0</div>
    <div class="timer_section_desc">дней</div>
    
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="hours_1">0</div>
    <div class="hours_2">0</div>
    <div class="timer_section_desc">часов</div>
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="minutes_1">0</div>
    <div class="minutes_2">0</div>
    <div class="timer_section_desc">минут</div>
  </div>
  <div class="timer_delimetr">:</div>
  <div class="timer_section">
    <div class="seconds_1">0</div>
    <div class="seconds_2">0</div>
    <div class="timer_section_desc">секунд</div>
  </div>
</div>

function timer(f) {
        var date = new Date(f);
        
        var f_time = Date.parse(date);

        function timer_go() {
            var n_time = Date.now();
            var diff = f_time - n_time;
            if(diff <= 0) return false;
            var left = diff % 1000;
            
            //секунды
            diff = Math.floor(diff / 1000);
            var s = diff % 60;
            if(s < 10) {
                $(".seconds_1").html(0);
                $(".seconds_2").html(s);
            }else {
                $(".seconds_1").html(Math.floor(s / 10));
                $(".seconds_2").html(s % 10);
            }
            //минуты
            diff = Math.floor(diff / 60);
            var m = diff % 60;
            if(m < 10) {
                $(".minutes_1").html(0);
                $(".minutes_2").html(m);
            }else {
                $(".minutes_1").html(Math.floor(m / 10));
                $(".minutes_2").html(m % 10);
            }
            //часы
            diff = Math.floor(diff / 60);
            var h = diff % 24;
            if(h < 10) {
                $(".hours_1").html(0);
                $(".hours_2").html(h);
            }else {
                $(".hours_1").html(Math.floor(h / 10));
                $(".hours_2").html(h % 10);
            }
            //дни
            var d = Math.floor(diff / 24);
            if(d < 10) {
                $(".days_1").html(0);
                $(".days_2").html(d);
            }else {
                $(".days_1").html(Math.floor(d / 10));
                $(".days_2").html(d % 10);
            }
            setTimeout(timer_go, left);
        }
        setTimeout(timer_go, 0);
    }


$(".timer").each(function() {
  console.log($(this).attr("data-finish"));
  timer($(this).attr("data-finish"))
});

Почему у меня таймер работает некорректно? $(".timer").each(function() {} не разделяет их. Два таймера работают как бы одной дате. Надеюсь, вопрос понятен.

https://codepen.io/pen?template=VwZEarv

Answer 1

[Stalker_RED]

$(".seconds_1") // находит на странице ВСЕ элементы с классом seconds_1
.html(0); // устанавливает во ВСЕ эти элементы 0

UPD: слегка допилил


для сравнения, другой таймер с похожим принципом: