jQuery each loop executes function only for the last element

Question

I'm making a countdown and using a flip-clock. Here is the markup

<div class="timer-special-offer"
  data-year="@Model.SpecialOfferModel.DateStart.Value.Year"
  data-month="@Model.SpecialOfferModel.DateStart.Value.Month"
  data-day="@Model.SpecialOfferModel.DateStart.Value.Day"
  data-hour="@Model.SpecialOfferModel.DateStart.Value.Hour"
  data-minute="@Model.SpecialOfferModel.DateStart.Value.Minute"
  data-second="@Model.SpecialOfferModel.DateStart.Value.Second"
  data-year-now="@DateTime.Now.Year"
  data-month-now="@DateTime.Now.Month"
  data-day-now="@DateTime.Now.Day"
  data-hour-now="@DateTime.Now.Hour"
  data-minute-now="@DateTime.Now.Minute"
  data-second-now="@DateTime.Now.Second">
    <div class="timer-counter">
      <div class="counter-inner"></div>
    </div>
</div>

Js code is something like this:

$(document).ready(function () {

    $('.timer-special-offer').each(function () {

        var timer = $('.timer-special-offer');

        if (timer.length) {

            const clock = $('.counter-inner').FlipClock({
                clockFace: 'DailyCounter',
                countdown: true,
                language: 'ru-ru'
            });

            const targetDate = new Date(
                parseInt(timer.data('year')),
                parseInt(timer.data('month')) - 1,
                parseInt(timer.data('day')),
                parseInt(timer.data('hour')),
                parseInt(timer.data('minute')),
                parseInt(timer.data('second')));
            const nowDate = new Date(
                parseInt(timer.data('yearNow')),
                parseInt(timer.data('monthNow')) - 1,
                parseInt(timer.data('dayNow')),
                parseInt(timer.data('hourNow')),
                parseInt(timer.data('minuteNow')),
                parseInt(timer.data('secondNow')));
            const time = (targetDate - nowDate) / 1000;

            clock.setTime(time);
            clock.start();
        }
    });
});

There are multiple objects with timer on them but the timer is working on the last object on the page like I never iterated through the timer-special-offer. Can't figure out why.

Answer 1

you are not looping on each element, your code is executing one specified code for 2..3.... times. you have to change :

$('.timer-special-offer').each(function (index,element) {

    var timer = $(element);

    if (timer.length) {

        const clock = timer .find('.counter-inner').FlipClock({
            clockFace: 'DailyCounter',
            countdown: true,
            language: 'ru-ru'
        });

        const targetDate = new Date(
            parseInt(timer.data('year')),
            parseInt(timer.data('month')) - 1,
            parseInt(timer.data('day')),
            parseInt(timer.data('hour')),
            parseInt(timer.data('minute')),
            parseInt(timer.data('second')));
        const nowDate = new Date(
            parseInt(timer.data('yearNow')),
            parseInt(timer.data('monthNow')) - 1,
            parseInt(timer.data('dayNow')),
            parseInt(timer.data('hourNow')),
            parseInt(timer.data('minuteNow')),
            parseInt(timer.data('secondNow')));
        const time = (targetDate - nowDate) / 1000;

        clock.setTime(time);
        clock.start();
    }
});