我的 javascripts 结果在显示 Javascripts 结果的表单元素上迭代后仅显示一次

Question

我希望我的 javascript 结果在我的表单元素迭代时进行迭代。 javascript 结果仅显示在迭代结果的一部分中。我希望它显示迭代中每个结果的唯一结果。我该怎么做？

我在循环中包含了 javascript 代码，但我仍然没有得到想要的结果。代码的其他部分正在迭代，但不是 javascript 部分

{% for post in public_posts%}

            <!-- Products tab & slick -->
            <div class="col-md-12">
                <div class="row">
                    <div class="products-tabs">
                        <!-- tab -->
                        <div id="tab1" class="tab-pane active">
                            <div class="products-slick" data-nav="#slick-nav-1">

                                <div class="product">
                                    <div class="product-img">
                                        <img src="static/img/product03.png" alt="">

                                   </div>
                                    <div class="product-body">
                                        <p class="product-category" >{{post.total_slot}}</p>
                                        <h3 class="product-name"><a href="#">{{post.post_title}}</a></h3>
                                        <h4 class="product-price">₦{{post.slot_value/post.total_slot}}</h4>
                                       <h4 class="remaining-time" id="demo"></h4>

                                        <div class="product-rating">
                                        </div>
                                        <div class="product-btns">
                                            <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
                                            <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
                                            <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
                                        </div>
                                    </div>
                                    <div class="add-to-cart">
                                        <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i> add to cart</button>
                                    </div>
                                </div>

                            </div>
                            <div id="slick-nav-1" class="products-slick-nav"></div>
                        </div>
                        <!-- /tab -->
                    </div>
                </div>
            </div>
            <script>
                // Set the date we're counting down to
                var countDownDate = new Date("{{post.share_date}}").getTime();

                // Update the count down every 1 second
                var x = setInterval(function() {

                  // Get today's date and time
                  var now = new Date().getTime();

                  // Find the difference between now and the count down date
                  var difference = countDownDate - now;

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

                  // Output the result in an element with id="demo"
                  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
                  + minutes + "m " + seconds + "s ";

                  // If the count down is over, write some text 
                  if (difference < 0) {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "EXPIRED";
                  }
                }, 1000);
                </script>
            <!-- Products tab & slick -->
            {% endfor %}

![图片链接]:https://www.canva.com/design/DADdASfyIuM/wkC2OlaGbWDymv5ehTXkIg/view?utm_content=DADdASfyIuM&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton

我希望红色的区域标记会出现在剩余的表单中，但根据迭代结果会有不同的结果

Answer 1

我认为脚本调用了多次，但每次它都会在屏幕上找到第一个 id="demo" 的元素，并覆盖它的内容，所以你只得到第一个 H4#demo 填充..