Rails 5.2: Bootstrap 4 tab panel not populating properly - ruby-on-rails

Question

I have the following code in my app:
<!-- Nav tabs -->
<div class="row">
<div class="col-md-3">
<ul class="nav md-pills pills-primary flex-column" role="tablist">
<% #users_with_apps = [] %>
<% AppForm.all.order("created_at DESC").each do |app| %>
<% unless #users_with_apps.include? User.find(app.user_id) %>
<% #users_with_apps << User.find(app.user_id) %>
<% end %>
<% end %>
<% #users_with_apps.each do |user| %>
<% apps = [] %>
<% AppForm.all.order("created_at DESC").each do |app| %>
<% if app.user_id == user.id %>
<% apps << AppForm.find(app.id) %>
<% end %>
<% end %>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#<% user.id %>-panel" role="tab">
Member #<%= fixed_digit_number(user.id) %> (<%= apps.count %>)
</a>
</li>
<% end %>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panels -->
<div class="tab-content vertical">
<% #users_with_apps.each do |user| %>
<% apps = [] %>
<% AppForm.all.order("created_at DESC").each do |app| %>
<% if app.user_id == user.id %>
<% apps << AppForm.find(app.id) %>
<% end %>
<% end %>
<!-- Panel 1 -->
<div class="tab-pane fade" id="<% user.id %>-panel" role="tabpanel">
<% apps.each do |app| %>
<%= render partial: "app_forms/app_line", locals: {application: app} %>
<% end %>
</div>
<!-- Panel 1 -->
<% end %>
</div> <!-- tab content -->
</div> <!-- col -->
</div> <!-- row -->
<!-- Nav tabs -->
It renders to look like this:
<!-- Nav tabs -->
<div class="row">
<div class="col-md-3">
<ul class="nav md-pills pills-primary flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#2-panel" role="tab">
Member #00002 (1)
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#1-panel" role="tab">
Member #00001 (13)
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panels -->
<div class="tab-content vertical">
<!-- Panel 1 -->
<div class="tab-pane fade" id="2-panel" role="tabpanel">
...panel 2 content...
</div>
<!-- Panel 1 -->
<!-- Panel 1 -->
<div class="tab-pane fade" id="1-panel" role="tabpanel">
...panel 3 content...
</div>
<!-- Panel 1 -->
</div> <!-- tab content -->
</div> <!-- col -->
</div> <!-- row -->
<!-- Nav tabs -->
Ideally, this would create a list of users on the left, and (depending on which user was clicked) their applications would populate on the righthand side.
Unfortunately, no matter what user is clicked, it displays the applications of the first user on the list.
Can anyone see what logic is going wrong here?

Answer 1

The only problem which I am seeing here now is panel ids and link to that panel id shouldn't start with a number. Instead, you can use panel-<id>. i.e: panel-1.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<div class="row">
<div class="col-md-3">
<ul class="nav md-pills pills-primary flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel-2" role="tab">
Member #00002 (1)
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel-1" role="tab">
Member #00001 (13)
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panels -->
<div class="tab-content vertical">
<!-- Panel 1 -->
<div class="tab-pane active" id="panel-2" role="tabpanel">
...panel 2 content...
</div>
<!-- Panel 1 -->
<!-- Panel 1 -->
<div class="tab-pane fade" id="panel-1" role="tabpanel">
...panel 3 content...
</div>
<!-- Panel 1 -->
</div> <!-- tab content -->
</div> <!-- col -->
</div> <!-- row -->
<!-- Nav tabs -->