Rails app with Bootstrap 5 vertical tabs not populating tab panel beyond the first element on click

Question

Hi I am very new to ruby on rails and I trying to populate my tab panel with information from the database, although the tabs themselves are correctly shown, on clicking the tabs the tab panel is only showing the information of the first tab (user). When I add the classes "show active" to the tabpanel I can see the information of all the users in a list but not on click of the tab. I would like a fresh pair of eyes to take a look at the code and see if I am doing something obviously wrong. Thank you.

<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <% @users.each do |user| %>
        <button class="nav-link" id="v-pills" data-bs-toggle="pill" data-bs-target="#v-pill-home<% user.id %>" type="button" role="tab" aria-controls="v-pills" aria-selected="true">
            <%= user.name %>
        </button>
    <% end %>
</div>
<div class="tab-content" id="v-pills-tabContent">
    <%  @users.each do |user| %>
        <div class="tab-pane fade" id="v-pill-home<% user.id %>" role="tabpanel" aria-labelledby="v-pills">
            <p> Street: <%= user.street %></p>
            <p> House number: <%= user.housenumber %></p>
        </div>
    <% end %>
</div>

Answer 1

There was an error in the bootstrap example, I used the horizontal tab and added the necessary classes to turn it into a vertical tab and it rendered everything correctly