如何为在Django中创建的for循环中重复的一组html代码运行JavaScript代码？

我在html中有此代码，可为上下文变量中的每个元素创建一个html代码块。

{% for car, speed in carSpeeds.items %}

<div id="car1">
    <div id="carSpeedBar">
<!-- progress bar indicating car speed value goes here -->
    </div>
</div>

<p id='result'></p>

<!-- div simply holding the variables for each iteration -->
<div class="container">
    <p id='carType'>{{ car }}</p>
    <p id='carSpeed'>{{ speed }}</p>
</div>

{% endfor %}

目标：我想为每个创建的栏运行此JS / JQ代码

var bar = $('#carSpeedBar');
var result = $('#carSpeed').text();
var res = document.getElementById('result');
var width = 0;

var id = setInterval(speed, 12);

    function speed(){

        if (width < result){
            width++;
                bar.style.width = width + '%';
                res.innerHTML = width + '%';

到目前为止，这是我所拥有的并且可以正常工作，但这仅为html代码的第一块创建了条形，而忽略了其他代码块，我不知道为什么。像这样，它为梅赛德斯创建了一个标杆，并且将所有其他值都保留下来，而将其他所有值保留为空白。我的猜测是它拒绝覆盖元素的ID，因为它们可能以某种方式被复制。请告诉我我做错了什么，以及我应该如何实现这一目标。

谢谢。