<div class="timer" data-finish="2027-11-19">
  <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="2027-12-09 14:53:12">
  <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>

.timer{
        font-size: 0;
        text-align: center;
    }
    .timer_section{
        display: inline-block;
        vertical-align: top;
    }
    .timer_section > div{
        display: inline-block;
        vertical-align: top;
        font-size: 50px;
        background: #4dadf7;
        color: #ffffff;
        line-height: 70px;
        width: 55px;
        margin: 0 1px;
        border-radius: 2px;
    }
    .timer_section > div.timer_section_desc{
        display: block;
        background: none;
        color: inherit;
        text-transform: uppercase;
        font-size: 16px;
        line-height: 30px;
        width: auto;
        margin: 0;
    }
    .timer_delimetr{
        display: inline-block;
        vertical-align: top;
        font-size: 50px;
        line-height: 70px;
        margin: 0 5px;
    }
    @media (max-width: 767px){
        .timer_section > div{
            font-size: 30px;
            width: 30px;
            line-height: 40px;
        }
        .timer_delimetr{
            line-height: 40px;
            font-size: 30px;
        }
        .timer_section > div.timer_section_desc{
            font-size: 14px;
            line-height: 26px;
        }
    }

function timer(elem) {
  const finish = new Date(elem.dataset.finish);
  const timer = setInterval(timer_tick, 1000);

  function timer_tick() {
    var diff = finish - Date.now();
    diff = Math.floor(diff / 1000);
    if (diff <= 0) {
      clearInterval(timer)
      return false;
    }

    //секунды
    var s = diff % 60;
    $(elem).find(".seconds_1").html(Math.floor(s / 10));
    $(elem).find(".seconds_2").html(s % 10);

    //минуты
    var m = Math.floor(diff / 60) % 60;
    $(elem).find(".minutes_1").html(Math.floor(m / 10));
    $(elem).find(".minutes_2").html(m % 10);
    //часы
    
    var h = Math.floor(diff / 3600) % 24;
    $(elem).find(".hours_1").html(Math.floor(h / 10));
    $(elem).find(".hours_2").html(h % 10);
    //дни
    var d = Math.floor(diff / 3600 / 24);
    $(elem).find(".days_1").html(Math.floor(d / 10));
    $(elem).find(".days_2").html(d % 10);
  }
}


$(".timer").each(function() {
  timer(this)
});