Функция Javascript для воспроизведения песен не работает в приложении Django

я создаю сайт музыкальных потоков и у меня есть эта js функция, которая воспроизводит песни на одном плеере при нажатии. песни воспроизводятся правильно, но когда я нажимаю на них, плеер всегда выводит название песни, исполнителя и изображение песни первой песни, также если я нажимаю на другие. как я могу это исправить?

Это js-функция:

function playSong(element){
        var songUrl = element.getAttribute('data-song-url');
        var audioPlayer = document.getElementById('audioPlayer');
        var audioSource = document.getElementById('audioSource');
        audioSource.src = songUrl;
        audioPlayer.load();
        audioPlayer.play();
        var songId = element.id;
        var newImage = document.getElementById("A_" + songId).src;
        var newSongName = document.getElementById("B_" + songId).textContent;
        var newArtistName = document.getElementById("C_" + songId).textContent;
        console.log(newSongName) //always displaying the things of the first song
        console.log(newImage)
        console.log(newArtistName)
        
        document.getElementById("audio-img").src = newImage;
        document.getElementById("audio-song").textContent = newSongName;
        document.getElementById("audio-artist").textContent = newArtistName;
    }

а это HTML-код:

{% for i in songs %}
            <div class="carousel-cell">
                <section class="main_song">
                    <div class="song-card">
                        <div class="containera">
                            <img src="{{i.image}}" id="A_{{i.id}}" alt="song cover">
                            <div class="overlaya"></div>
                            <div>
                                <a class="play-btn" data-song-url="{{i.song.url}}" id="{{i.id}}" onclick="playSong(this)"><i class="fas fa-play-circle fa-2x"></i></a>
                                {% if user.is_authenticated %}
                                    <div class="add-playlist-btn">
                                        <a id="W_{{i.song_id}}" title="Add to Playlist" onclick="showDiv(this)"><i class="fas fa-ellipsis-h"></i></a>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div>
                        <p class="songName" id="B_{{i.id}}">{{i.name}}</p>
                        <p class="artistName" id="C_{{i.id}}">{{i.artist}}</p>
                    </div>
                </section>
            </div>
  {% endfor %}

Вернуться на верх