Не работает прогресс бар для треков на сайте

Возникла проблема, на сайте отображается несколько треков и нужно чтобы снизу был прогресс бар для текущего трека. Для первого трека все работает нормально, но для всех остальных при смене значения на ползунке, значение ползунка улетает на 0 и прогресс трека тоже на 0.

html:

{% extends 'base.html' %}
{% load static %}
{% block title %}SoundLine{%endblock%}

{% block content %}
    <div class="song-list-container">
        
        <div class="song-list">
            <ul class="song-list-ul">
                {% for song in object_list %}
                    <li class="song-list-ul-item">
                        <button class="play-button">play</button>
                        <a href="#">{{song.title}}</a>
                        
                        <audio name="song" class="audio-song" src="{{song.song_file.url}}" controls></audio>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="down-info">
        <div class="down-info-elements">
            **<input type="range" id="song-progress" onchange="setProgress()" min="0" max="100" step="0.01" value="0">**
            <button id="play-prev"><-</button>
            <button class="play-button-down" id="play2">play</button>
            <button id="play-next">-></button>
            <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.1">
        </div>
    </div>
{%endblock%}

{% block side_script %}
<script src="{% static 'js/player.js' %}"></script>
{% endblock %}

JavaScript:

var playButtons = document.querySelectorAll('.play-button');
var isPlaying = false;
let currentAudio = null;
let currentIndex = -1;
let audioList = document.querySelectorAll('.audio-song');

audioList.forEach(function(audio){
    audio.volume ='0.2'
})

playButtons.forEach(function(button, index) {
    button.addEventListener('click', function() {
        var audio = this.parentNode.querySelector('.audio-song');
        if (isPlaying && currentAudio) {
            currentAudio.pause();
        }
        currentAudio = audio;
        isPlaying = true;
        audio.play();
        currentIndex = index;
        currentAudio.addEventListener('ended', playNext);
    });
});

function playNext() {
    if (currentAudio) {
        currentAudio.pause();
        isPlaying = false;
    }
    currentIndex += 1;
    if (currentIndex >= audioList.length) {
        currentIndex = 0;
    }
    currentAudio = audioList[currentIndex];
    currentAudio.play();
    isPlaying = true;
    currentAudio.addEventListener('ended', playNext);

    
}

function playPrevious(){
    if (currentAudio) {
        currentAudio.pause();
        isPlaying = false;
    }
    currentIndex -=1
    if (currentIndex < 0) {
        currentIndex = audioList.length-1;
    }
    currentAudio = audioList[currentIndex];
    currentAudio.play();
    isPlaying = true;
    currentAudio.addEventListener('ended', playNext);

    
}

var playButttonDown = document.querySelector('#play2');
playButttonDown.addEventListener('click', function() {
    if (isPlaying) {
        isPlaying = false;
        currentAudio.pause();
    } else {
        isPlaying = true;
        if (currentAudio) {
            currentAudio.play();
        } else {
            playNext();
        }
    }
});


var nextButton = document.querySelector('#play-next')
nextButton.addEventListener('click', playNext)

var prevButton = document.querySelector('#play-prev')
prevButton.addEventListener('click', playPrevious)

var volumeSlider = document.querySelector('#volume-slider')

volumeSlider.addEventListener('change',function(){
    currentAudio.volume = this.value
    
})

var progressBar = document.querySelector('#song-progress')

audioList.forEach(function(audio){
    audio.addEventListener('timeupdate', function(){
        progressBar.value = `${(audio.currentTime/audio.duration)*100}`
    })
})


function setProgress(){
    currentAudio.currentTime = (progressBar.value/100)*currentAudio.duration
}

Буду ОЧЕНЬ благодарен за помощь