php网页多个倒计时,怎么实现一个页面有多个倒计时同时进行

后台返回时间，一个页面中有多个表格每个表格中有一行用来显示后台给的时间，比如说后台给一号表格10分钟的倒计时时间，给2号表格15分钟的倒计时时间，那我要怎么做才能使得这两个倒计时都能进行？？我自己模拟了一个静态的假的倒计时，但是一直没办法让两个时间都能倒计时。

模拟页面：

(ps:这里的10分50秒我后面有转化成00:00的格式，这两个数据都是假的，在html里填充进去的)

html代码：

倒计时

离预约失效的时间:

10分50秒,

离预约失效的时间:

3分58秒,

js代码：

var remainTime = $("body").find(".time").text();

var clock = remainTime.split(",");

var countDownTimes = [];

clock.pop();

for (var i = 0; i < clock.length; i++) { //获取总时间

var second = clock[i].slice(-4, -1); //秒数

var minu = clock[i].slice(0, 2); //分钟数

/* 以下的if都是为了将X分x秒转换成00：00格式 */

if (second.substr(0, 1) === '分') {

second = second.slice(1, 3);

}

if (second.substr(1, 1) == '分') {

second = second.slice(2, 3);

}

if (second < 0) {

second = 60 + parseInt(second);

second = second.toString();

minu = parseInt(minu);

minu = minu - 1;

minu = minu.toString();

}

if (minu.substr(minu.length - 1, 1) == '分') {

minu = minu.slice(0, 1);

}

if (minu.length == 1 || minu.length == 0) {

minu = "0" + minu;

}

if (second.length == 1) {

second = "0" + second;

}

time = minu + ":" + second;

countDownTimes[i] = parseInt(minu * 60 + second * 1); //开始：转换成总秒数

/* cutTime(countDownTime); */

}

for (var j = 0; j < countDownTimes.length; j++) {

var countDownTime = countDownTimes[j];

cutTime(countDownTime);

}

function cutTime(countDownTime) {

var timer = setInterval(function () {

if (countDownTime >= 0) {

showTime(countDownTime);

countDownTime--;

} else {

clearInterval(timer);

alert("计时结束,给出提示");

}

}, 1000);

}

function showTime(countDownTime) {

var minute = Math.floor(countDownTime / 60);

var seconds = countDownTime - 60 * minute;

minute = minute.toString();

seconds = seconds.toString();

if (minute.length == 1) {

minute = "0" + minute;

}

if (seconds.length == 1) {

seconds = "0" + seconds;

}

time = minute + ":" + seconds;

/* 显示时间 */

console.log(time);

$("span#2").text(time);

}

非常不理解的是我如果把time这个东西填充进上面随便一个b标签里，都只能显示一个时间就是后面这个div的时间，但是如果我是在控制台里打印time，就会显示两个时间，因为我有两个div时间。这是为什么呢？如图