Bootstrap JS dynamic tabs- every nav-link change the same element

Question

I'm trying to create list of dynamic cards. I've almost finished but one problem appear. When I change links on last object nav-links works fine, but when i want to change another objects, the same last object changes.

HTML

{% extends "post/base.html" %}
{% block title %}
    <title>Home Page</title>
{% endblock title %}
{% block content %}
    {% for obj in EveryPost %}
        <div class="card text-center">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="RU-tab" data-toggle="tab" href="#RU" role="tab" aria-controls="RU" aria-selected="false">RU</a>
                </li>
                </ul>
            </div>
            <div class="card-body tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="PL" role="tabpanel" aria-labelledby="PL-tab">
                <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_pl }}</a></h5>
                <p class="card-text">{{ obj.text_pl|truncatechars:350 }}</p>
                <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
                <div class="tab-pane fade" id="RU" role="tabpanel" aria-labelledby="RU-tab">
                <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_ru }}</a></h5>
                <p class="card-text">{{ obj.text_ru|truncatechars:350 }}</p>
                <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
            </div>
            <div class="card-footer text-muted">
                <span class="float-left">{{ obj.date|date:"d M y" }}</span>
                <span class="float-right">Przesłane przez: {{ obj.User }}</span>
            </div>
        </div>
    {% endfor %}
{% endblock content %}

Answer 1

this happened because in a forloop, you have class "active" available for all item. but you have to filter it so to have such classes only for one item. for example this a tag should be like this:

<a class="nav-link active" id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>

->

 <a class="nav-link {% if forloop.counter == 1 %} active {% endif %} id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>

but there other tags too, and you should do the same for them.

I forget to mention a very important tip! alongside "active" class there is also ID (id) still the same for all objects in the forloop too! and this means any JavaScript function targeting an special "id" will work on all the elements having that id too!! in the html tags to make different id simply do this:

    <a id="sth-{{ forloop.counter }}" >the link</>.  

that was for example an a tag. but I can see you have some other tags which have an id, and regarding you code all of them will have the same id after rendering the code by django.

{% for obj in EveryPost %}
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="myTab-{{ forloop.counter0 }}" role="tablist">
            <li class="nav-item">
                <a class="nav-link {% if forloop.counter==1 %} active {% endif %}" id="PL-tab-{{ forloop.counter0 }}" data-toggle="tab" href="#PL-{{ forloop.counter0 }}" role="tab" aria-controls="PL" aria-selected="true">PL</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="RU-tab-{{ forloop.counter0 }}" data-toggle="tab" href="#RU-{{ forloop.counter0 }}" role="tab" aria-controls="RU" aria-selected="false">RU</a>
            </li>
            </ul>
        </div>
        <div class="card-body tab-content" id="myTabContent-{{ forloop.counter0 }}">
            <div class="tab-pane fade show {% if forloop.counter==0 %} active {% endif ©}" id="PL-{{ forloop.counter0 }}" role="tabpanel" aria-labelledby="PL-tab">
            <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_pl }}</a></h5>
            <p class="card-text">{{ obj.text_pl|truncatechars:350 }}</p>
            <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
            <div class="tab-pane fade" id="RU-{{ forloop.counter0 }}" role="tabpanel" aria-labelledby="RU-tab">
            <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_ru }}</a></h5>
            <p class="card-text">{{ obj.text_ru|truncatechars:350 }}</p>
            <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
        </div>
        <div class="card-footer text-muted">
            <span class="float-left">{{ obj.date|date:"d M y" }}</span>
            <span class="float-right">Przesłane przez: {{ obj.User }}</span>
        </div>
    </div>
{% endfor %}