Мой Javascript работает только на один элемент в Python, встроенный в цикл в Django2

Question

Я повторяю эти карточки шаблонов HTML, используя цикл Python для, и у меня есть javascript, чтобы пойти с ним.Проблема в том, что javascript работает только с первым элементом (скрипт в основном получает искомую позицию аудио), а не с остальными.Я думал, что это потому, что я установил идентификатор карты шаблона вместо имени класса, но я все еще получаю те же результаты.Javascript находится в цикле for.Может быть, не должно?В любом случае вот мой код:

{% for song in songs %}
            <div class="col-md-4">
                <div class="card mb-4 box-shadow">
                    <img class="card-img-top" id="img_size"
                         src="{{ song.song_image.url }}"
                         alt="Card image cap">
                    <div class="my-header">
                        <h3 id="song_title">{{ song.song_title }}</h3>
                        <span id="pub_date">{{ song.publishing_date }}</span>
                    </div>
                    <div style="clear:both"></div>
                    <hr />
                    <div class="card-body">
                        <p class="card-text">{{ song.song_description }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <audio class="myAudio" controls>
                                    <source src="{{ song.song_file.url }}" type="audio/mpeg">
                                    <source src="{{ song.song_file.url }}" type="audio/wav">
                                    Your browser does not support the audio element.
                                </audio>
                                <script>
                                    var vid = document.getElementsByClassName("myAudio");

                                    function getCurTime() {
                                        alert(vid.currentTime);
                                    }

                                    function setCurTime() {
                                        vid.currentTime=5;
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}

Answer 1

1. Нет, JavaScript не должен быть в цикле.
2. В вашем цикле вы не создаете уникальные идентификаторы для ваших аудиоэлементов.Простой способ сделать это можно сделать с помощью {{ forloop.counter }} в атрибуте class (или любом другом) вашего аудио-тега, а затем вызвать его в вашем JavaScript.

Пожалуйста, дайте мне знать, еслитебе нужна дополнительная помощь.