Active class on first element of nav-tab with pagination - html

Question

I have a project where I have a paginated nav-tab with bootstrap.
The problem is that, anytime I refresh the page or I change the page with my pagination buttons, the active element is always the element n° 1 of the list.
This is probably due to the fact that I need to activate it upon opening the page with an if condition within the forloop. Let me post some code to be more clear
template
<input type="hidden" id="quizProfileId" value="{{pk}}">
<div class="card">
<div class="card-body">
<h4 class="card-title ms-3">New {{quiz_attempt.question.question_subject}} Quiz</h4>
<div class="row">
<div class="col-md-9">
<div class="tab-content text-muted mt-4 mt-md-0" id="v-pills-tabContent">
{% for quiz in quizzes %}
<div class="tab-pane {% if forloop.counter == 1 %}active{% endif %} ms-3 questionsObj" id="question{{quiz.question_draft.question.id}}" value="{{quiz.question_draft.question.id}}">
<h5 class="text-dark">{{quiz.question_draft.question.text}}</h5>
<div class="list-group mt-3">
{% for image in quiz.question_draft.question.questionimage_set.all %}
<a href="{{image.image.url}}" target="_blank">
<img src="{{image.image.url}}" alt="" width="100px" height="100px">
</a>
<br>
{% endfor %}
{% for answer in quiz.question_draft.answerdraft_set.all|shuffle %}
<a href="#"
data-pk="{{quiz.question_draft.question.id}}"
id="answer{{answer.answer.id}}" data-answerId="{{answer.answer.id}}"
class="
list-group-item answer question{{quiz.question_draft.question.id}} list-group-item-action
{% if quiz.question_draft.is_answered == True and answer.answer.is_correct == True %}bg-success{% endif %}
{% if answer.is_answered == True and answer.is_correct == True %}bg-success disabled
{% elif answer.is_answered == True and answer.is_correct == False %}bg-danger disabled
{% elif quiz.question_draft.is_answered == True %} disabled
{% endif %}
">
<b>{{forloop.counter0|to_char}}</b> &nbsp&nbsp {{answer.answer.text}}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="form-group mt-3 mb-3">
{% if quiz_profile.is_completed != True %}
<form id="finishQuiz" action="{% url 'quiz:finish_test' pk=pk %}" method="get">
<button type="submit" class="btn btn-sm btn-success" id="finishButton" >Finish Test</button>
Save
Cancel Test
</form>
{% else %}
Quiz Report
{% endif %}
</div>
</div>
<div class="row">
<div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
{% for quiz in pages %}
<a class="btn btn-sm btn-outline-secondary custom m-1
{% for answer in quiz.question_draft.answerdraft_set.all %}
{% if answer.is_answered == True and answer.is_correct == True %}bg-success{% endif %}
{% endfor %}
{% if quiz.question_draft.is_correct == False %}bg-danger{% endif %}
{% if forloop.counter == 1 %}active{% endif %} "
id="questionButton{{quiz.question_draft.question.id}}"
data-bs-toggle="pill" href="#question{{quiz.question_draft.question.id}}">{{ pages.start_index|add:forloop.counter0 }}
</a>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-9">
</div>
<div class="col-md-3">
<ul class="pagination">
{% if pages.has_previous %}
<li class="page-item">
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ pages.previous_page_number }}"><i class="fas fa-angle-double-left"></i></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
</li>
{% endif %}
{% for i in paginator.page_range %}
<li class="page-item {% if pages.number == i%} active {% endif %} %}" >
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ i }}" >{{i}}</a>
</li>
{% endfor %}
{% if pages.has_next %}
<li class="page-item">
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ pages.next_page_number }}" ><i class="fas fa-angle-double-right"></i></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
I think that in particular {% if forloop.counter == 1 %}active{% endif %} is the main reason of this problem. On the other side, I don't know how to give the class active only to the first element when I load the page for the first time.
And in the same time, I would like to load the first element of the second page, when I load the second page and so on.