ASP.NET Core MVC using bootstrap cards with navigation tabs in a foreach loop with many cards

My question is, is there a possibility with ASP.NET Core MVC to put all data from my database in a foreach loop in different bootstrap cards with navigation?

I’ve already tried this and found that it works partially. But as soon as I click on a navigation tab from the second card, the tabs are only changed on the first card.

That’s my index.html:

<div class="row">

@foreach (var q in Model.Question)
{
    <div class="col-sm-12 col-lg-6 pt-sm-4 pt-4">
        <div class="card ">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="fragen-list" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" href="#frage" role="tab" aria-controls="frage" aria-selected="true">Frage</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#antwort" role="tab" aria-controls="antwort" aria-selected="false">Antwort</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content mt-3 mt-sm-3">
                    <div class="tab-pane active" id="frage" role="tabpanel">
                        <h5 class="card-title text-center">@q.Question</h5>
                    </div>


                    <div class="tab-pane" id="antwort" role="tabpanel" aria-labelledby="history-tab">
                        <p class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort1</p>
                        <ul>
                            @if (@Model.Answer.Single(a => a.Id == q.AnswerId).Example1 != null)
                            {
                                <li class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Example1</li>
                            }
                            @if (@Model.Answer.Single(a => a.Id == q.AnswerId).Example2 != null)
                            {
                                <li class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Example2</li>
                            }
                            @if (@Model.Answer.Single(a => a.Id == q.AnswerId).Example3 != null)
                            {
                                <li class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Example3</li>
                            }
                            @if (@Model.Answer.Single(a => a.Id == q.AnswerId).Example4 != null)
                            {
                                <li class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Example4</li>
                            }

                        </ul>

                        @if (@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort2 != null)
                        {
                            <p class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort2</p>
                        }
                        @if (@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort3 != null)
                        {
                            <p class="card-text">@Model.Answer.Single(a => a.Id == q.AnswerId).Antwort3</p>
                        }
                    </div>
                </div>
            </div>
            <div class="card-footer text-center">
                <p class="card-text small text-black-50">Ausbildungsfach: @q.Category &nbsp; | &nbsp; Prüfungsfach: @q.ExamCategory &nbsp; | &nbsp; Schulfach: @q.SubjectCategory </p>
            </div>
        </div>
    </div>
}
</div>

And here is my small javascript file:

$('#fragen-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')

});

Card Nav Header:

As soon as I click on “Answer” on my card 2, my card 1 changes to the “Answer” page and not my card 2

Answer

Change your code like below:

<div class="row">
    @{var i = 0; }     //add this...
    @foreach (var q in Model.Question)
    {
        <div class="col-sm-12 col-lg-6 pt-sm-4 pt-4">
            <div class="card ">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" id="fragen-list" role="tablist">
                        <li class="nav-item">               //change here..
                            <a class="nav-link active" href="#frage_@i" role="tab" aria-controls="frage" aria-selected="true">Frage</a>
                        </li>
                        <li class="nav-item">         //change here...
                            <a class="nav-link" href="#antwort_@i" role="tab" aria-controls="antwort" aria-selected="false">Antwort</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content mt-3 mt-sm-3">
                                                        //change here...
                        <div class="tab-pane active" id="frage_@i" role="tabpanel">
                            <h5 class="card-title text-center">@q.Question</h5>
                        </div>

                                                  //change here...
                        <div class="tab-pane" id="antwort_@i" role="tabpanel" aria-labelledby="history-tab">                                                                  
                              //...     
                        </div>
                    </div>
                </div>
                //...
            </div>
        </div>
        i++;       //add this...
    }
</div>