JavaScript — подключение таймера обратного отсчета к базе данных

Я пытаюсь разработать онлайн-аукцион. Вот почему мне нужно несколько таймеров обратного отсчета, которые используются для отображения времени, в течение которого действует предложение. Я использую циклическую функцию «foreach» для представления предложений из базы данных. В таблице предложений есть поле «ValidFor» с данными в формате «дд-мм-гггг». Я нашел решение использовать несколько таймеров на одной странице, но у меня возникли трудности с подключением моей переменной данных к коду таймера. Проблема в том, что мне нужно вручную добавлять сроки для предложений, которые у меня уже есть в базе данных.
У меня уже есть переменные, но они в текстовом формате.

В следующем формате крайние сроки для предложений должны быть введены для таймера:

  var tl = new Date('2018/06/21 18:28:00');
var t2 = new Date('2018/06/23 10:28:00');

и для следующего таймера мне нужно скопировать одну строку кода и изменить его идентификатор, добавить новый срок. Я просто хочу получить данные из базы данных и войти в таймер.

ИЛИ вручную измените id для div:

<div style="margin:5px; font-weight:bold;" id="CDT1" class="CDT"></div>
<div style="margin:5px; font-weight:bold;" id="CDT2" class="CDT"></div>

Полный вид таймера с CSS, JavaScript и HTML

Javascript таймера выглядит следующим образом:

function CountdownTimer(elm, tl, mes) {
this.initialize.apply(this, arguments);
}
CountdownTimer.prototype = {
initialize: function(elm, tl, mes) {
this.elem = document.getElementById(elm);
this.tl = tl;
this.mes = mes;
},
countDown: function() {
var timer = '';
var today = new Date();
var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));
var hour = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
var min = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
var sec = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;
var me = this;

if ((this.tl - today) > 0) {
timer += '<span class="number-wrapper"><div class="caption">ДЕНЬ</div><span class="number day">' + day + '</span></span>';
timer += '<span class="number-wrapper"><div class="caption">ЧАС</div><span class="number hour">' + hour + '</span></span>';
timer += '<span class="number-wrapper"><div class="caption">МИН</div><span class="number min">' + this.addZero(min) + '</span></span><span class="number-wrapper"><div class="line"></div><div class="caption">СЕК</div><span class="number sec">' + this.addZero(sec) + '</span></span>';
this.elem.innerHTML = timer;
tid = setTimeout(function() {
me.countDown();
}, 10);
} else {
this.elem.innerHTML = this.mes; //sale is over
return;
}
},
addZero: function(num) {
return ('0' + num).slice(-2);
}
}

function CDT() {

// Set countdown limit
var tl = new Date('2018/06/21 18:28:00');
var t2 = new Date('2018/06/23 10:28:00');

// You can add time's up message here
var timer1 = new CountdownTimer('CDT1', tl, '<span class="number-wrapper"><div class="line"></div><span class="number end">Акция Закончилась!</span></span>');
timer1.countDown();
var timer2 = new CountdownTimer('CDT2', t2, '<span class="number-wrapper"><div class="line"></div><span class="number end">Акция Закончилась!</span></span>');
timer2.countDown();
}
window.onload = function() {
CDT();
}

В HTML это выглядит следующим образом, где мне приходится вводить разные идентификаторы для разных таймеров, где я использую цикл «foreach» для извлечения предложений:

<div style="margin:5px; font-weight:bold;" id="CDT1" class="CDT"></div>
<br/>
<hr/>
<div style="margin:5px; font-weight:bold;" id="CDT2" class="CDT"></div>