HTML Tabs that are created using foreach

Im working on a a web page that has to have tabs. The tabs have to be created using a for each because the content has to be loaded out of a list. I found a tutorial on w3schools (https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp). I tried to replicate on of the examples and added the foreach loop. But if i click one of the tabs, i get sent to the index.hmtl (probably because of the # in the href).I can neither change the model or the list.

                    <div class="container">
                        <ul class="nav nav-tabs">
                            @foreach (FooModel foo in fooModels)
                            {
                                <li class="nav-item">
                                    <a class="nav-link active" href="#foo_@foo.Id">@foo.Title</a>
                                </li>
                            }
                        </ul>
                    </div>



                    
                    <div class="card-body">
                    <h3>foo's</h3>
                        <div class="tab-content">
                            @foreach (FooModel fooModel in fooModels)
                            {
                                <div id="application_@fooModel.Id" class="tab-pane fade">
                                    <h3>Foo:: @fooModel.Title</h3>
                                    @if (IsInEditMode == true)
                                    {
                                        <InputDate @bind-Value="fooModel.DateFrom"></InputDate>
                                        <InputDate @bind-Value="fooModel.DateTo"></InputDate>
                                    }
                                    else
                                    {
                                        <p>@fooModel.DateFrom.ToString()</p>
                                        <p>@fooModel.DateTo.ToString()</p>
                                    }
                                </div>
                            }
                        </div>
                    </div>