使用javascript在同一页面中运行多个计时器

下面的代码打印许多卡片的标题和它们的倒计时时间……问题是计时器只打印第一张卡片。如何打印所有卡片？我在谷歌上搜索了很多，但都能找到相关的答案。请帮助我如何在每张卡片上获取计时器

function previewall()
{
$.ajax({
type: "POST",
data: {
},
url: "readall.php",
dataType: "json",
 success: function(JSONObject) {
  var peopleHTML = "";
  for (var key in JSONObject) {
    if (JSONObject.hasOwnProperty(key)) {       
        peopleHTML += "<div class='wrapper'><label>" + JSONObject[key]["title"] + "</label><br>";
        peopleHTML += "<p id='demo1'></p><br><p id=demo></p> </div>";
 var x = setInterval(function() {
      var count =JSONObject[key]["valid_date"];
    var dat=JSONObject[key]["started_date"];
    var countDownDate = new Date(count).getTime();
    var date = new Date(dat).getTime();

// Get todays date and time
var now = new Date().getTime();
var elapsed = now - date;
var distance = countDownDate - now;
var planned= date - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

var days1 = Math.floor(elapsed / (1000 * 60 * 60 * 24));
var hours1 = Math.floor((elapsed % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes1 = Math.floor((elapsed % (1000 * 60 * 60)) / (1000 * 60));
var seconds1 = Math.floor((elapsed % (1000 * 60)) / 1000);

var days2 = Math.floor(planned / (1000 * 60 * 60 * 24));
var hours2 = Math.floor((planned % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes2 = Math.floor((planned % (1000 * 60 * 60)) / (1000 * 60));
var seconds2 = Math.floor((planned % (1000 * 60)) / 1000);    

if (distance < 0) {
    document.getElementById("demo").innerHTML = "EXPIRED";
}
else if(elapsed<0){     
        document.getElementById("demo1").innerHTML = "Starts in " + days2 + "d " + hours2 + "h " + minutes2 + "m " + seconds2 + "s " ;  
}
else
{
     document.getElementById("demo1").innerHTML = "Posted <br>" + days1 + "d " + hours1 + "h " + minutes1 + "m " + seconds1 + "s ago" ;

     document.getElementById("demo").innerHTML = days + "d " + hours + "h "  + minutes + "m " + seconds + "s Left" ;
}
    });
    }
  }
 $("#people").html(peopleHTML);
 }
 });
 }  

函数预览墙（）
{
$.ajax({
类型：“POST”，
数据：{
},
url:“readall.php”，
数据类型：“json”，
成功：函数（JSONObject）{
var peopleHTML=“”；
for（JSONObject中的var键）{
如果（JSONObject.hasOwnProperty（键））{
peopleHTML+=“”+JSONObject[key][“title”]+“
”；
peopleHTML+=“

”；
var x=setInterval（函数（）{
var count=JSONObject[key][“valid_date”]；
var dat=JSONObject[key][“开始日期”]；
var countDownDate=新日期（count）.getTime（）；
var date=新日期（dat）.getTime（）；
//获取今天的日期和时间
var now=new Date（）.getTime（）；
var已过去=现在-日期；
var距离=倒计时日期-现在；
var计划=日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
var days1=数学下限（已用/（1000*60*60*24））；
var hours1=数学楼层（（经过的时间%（1000*60*60*24））/（1000*60*60））；
var minutes1=数学楼层（（已用%（1000*60*60））/（1000*60））；
var seconds1=数学地板（（已用时间%（1000*60））/1000）；
var days2=数学楼层（计划/（1000*60*60*24））；
var hours2=数学楼层（（计划%（1000*60*60*24））/（1000*60*60））；
变量分钟数2=数学楼层（（计划%（1000*60*60））/（1000*60））；
var seconds2=数学楼层（（计划百分比（1000*60））/1000）；
如果（距离<0）{
document.getElementById（“demo”）.innerHTML=“过期”；
}
否则，如果（经过则问题是所有计时器都绑定变量
键
，因此当它们触发时，它们会看到
键
的最终值

请尝试以下方法：

for (var k in JSONObject) {
   let key = k;
   if (JSONObject.hasOwnProperty(key)) {
     ...

您有多个元素共享相同的
id
（即demo，demo1），结果页面被破坏，这就是问题的原因

最快的修复方法是保留一个计数器，并将其嵌入到您通过友好方式创建的元素的各种
id
s中

比如：

var peopleHTML = "";
var i = -1;
for (var key in JSONObject) {
i++;
if (JSONObject.hasOwnProperty(key)) {       
    peopleHTML += "<div class='wrapper'><label>" + JSONObject[key]["title"] + "</label><br>";
    peopleHTML += "<p id='demoOuter'"+i+"></p><br><p id=demoInner"+i+"></p> </div>";

// [CUT]

f (distance < 0) {
    document.getElementById("demoInner"+i).innerHTML = "EXPIRED";
}
else if(elapsed<0){     
        document.getElementById("demoOuter"+i).innerHTML = "Starts in " + days2 + "d " + hours2 + "h " + minutes2 + "m " + seconds2 + "s " ;  
}
else
{
     document.getElementById("demoOuter"+i).innerHTML = "Posted <br>" + days1 + "d " + hours1 + "h " + minutes1 + "m " + seconds1 + "s ago" ;

     document.getElementById("demoInner"+i).innerHTML = days + "d " + hours + "h "  + minutes + "m " + seconds + "s Left" ;
}

var peopleHTML=”“；
var i=-1；
for（JSONObject中的var键）{
i++；
如果（JSONObject.hasOwnProperty（键））{
peopleHTML+=“”+JSONObject[key][“title”]+“
”；
peopleHTML+=“

”；
//[剪辑]
f（距离<0）{
document.getElementById（“demoInner”+i）.innerHTML=“过期”；
}
否则如果（Elapsed不确定你的HTML页面是什么样子，但是你不应该为每个要更新的卡片创建一个不同的HTML元素吗？目前，所有内容都写入相同的
demo
resp.
demo1
elements.mine是一个动态页面。卡片的数量经常变化。因此我无法正确创建元素。我添加了imag示例输出的e。看一看@ammoqt每张卡中的ID必须是不同的，请参见Alex的答案。格式有点糟糕，但方法应该是明显的。当我运行代码时，它只显示了最后一张卡的时间。我想我现在非常接近答案。@Alex