管理在 JavaScript 中的动态元素中制作的计时器

Question

实际上，我正在通过 AJAX 从数据库中检索一些数据，在检索数据时，我使用 JavaScript 在 HTML 中制作了一些动态元素。我在容器中创建了动态行，在该行中我创建了一个动态 div，其类为“col-md-4”，它是父行的子行，这意味着至少可以有 3 个动态 div 的 class="col-md- 4" 动态行。为此，在 AJAX 的 obj.success 函数中使用了一个循环。使用循环在动态行中制作 3 个动态元素的目的。如果不使用循环，那么新行将只有一个 col-md-4 类的 div。

现在的问题是我从数据库中检索一些时间，然后使用当前时间我得到两个 tme 的差异，然后使用一个函数来运行时间。这一切都是循环。现在的问题是计时器仅针对行中的最后一个元素运行。我在另一个场景中使用了计时器，但是没有问题，因为在那个场景中没有使用循环。

var ajax = prompt('Confirm demo or paste AJAX data', '[ {"id":1}, {"id":2}, {"id":3}, {"id":4}, {"id":5}]');

display(ajax);

function display(response) {

    var n=1;

    var times = ["2019-09-19 12:59","2019-09-27 12:59","2019-12-19 12:59","2019-11-19 12:59","2019-10-19 12:59"];

    var time=new Date().toLocaleTimeString('en-GB');

           var res = time.slice(0,-3);

    var today = new Date();

        var dd = String(today.getDate()).padStart(2, '0');

        var mm = String(today.getMonth() + 1).padStart(2, '0'); 

        var yyyy = today.getFullYear();

        today = yyyy + '-' + mm + '-' + dd;

        var current=today+" "+res;

      //  alert(current);

    var data = JSON.parse(response);

    if(data.length) {

        for(var i=0;i<data.length;i++) {

            var parent= document.getElementsByClassName('carousel')[0];

            var row1= document.createElement("div");

            row1.setAttribute("class", "row");

            row1.setAttribute("id", "row"+n);

            parent.appendChild(row1);

            var crow1;

            for(var j=0;j<3 && i+j < data.length;j++) {

              crow1 = document.createElement("div");

              crow1.setAttribute("class", "col-md-4");

              crow1.setAttribute("id", data[i+j].id);

                }

            }, 1000);

            }

            i += 3-1;

            n++;

        }

    }

}

DIV.col-md-4 {

  display: inline;

  background-color: #FF0080;

  margin: 5px;

}

.row {

  display: block;

  background-color: #80E080;

  padding: 3px;

}

<div class="carousel">

</div>

为什么只有最后一个元素显示计时器？