How to increase progress bar each time input=type['radio'] is checked using javascript?

I am making a quiz app using django but I'm stuck with javascript here.

I want the progress bar to increase each time any radio button is checked according to the percentage of the questions answered out of total questions.

The issue here is it only increases once i.e, for only first question. For example, if there are three questions, the progress bar will be stuck at 33% no matter other are answered or not.

Here's the relevant code:

HTML:-

<!--progress bar-->
        <div id="progress-bar-display">0%</div>

{% for q in questions %}
                    <h3> {{ q.id }}.  {{ q.question }}</h3>
                    <input type = "radio" name = "q{{ q.id }}" value = "a" id = "q1a" >   a. {{ q.option1 }}<br><br>
                    <input type = "radio" name = "q{{ q.id }}" value = "b" id = "q1b" >   b. {{ q.option2 }}<br><br>       
                    <input type = "radio" name = "q{{ q.id }}" value = "c" id = "q1c" >   c. {{ q.option3 }}<br><br>
                    <input type = "radio" name = "q{{ q.id }}" value = "d" id = "q1d"  >   d. {{ q.option4 }}<br><br>
                    
                {% endfor %}

JavaScript :-

    //progress_bar_count-->
    var radio = document.querySelectorAll("input[type='radio']");
    answered = 0;
    var size = 0;
    function animate(){
    answered += (1 / questionCount * 100).toFixed(0)
    var progressBar = document.getElementById("progress-bar-display");
    var animation = size;
    var id = setInterval(move, 10);
    var increment = answered;
    
    size = animation + increment;
    
    function move() {
        if (animation >= size || size > 100) {
        clearInterval(id);
        } else {
        animation++;
        progressBar.style.width = animation + '%';
        progressBar.innerHTML = animation * 1 + '%';
        }
    }
    }
    for (var i = 0 ; i < radio.length; i++) {
        radio[i].addEventListener('click' , animate) ; 
    }