アコーディオンを複数設置して個々に開閉したい

【やりたいこと】
各リンク毎にアコーディオンを使って開閉させる

【困っていること】
一番上のリンクしかアコーディオンが開閉しない

【参考記事】
https://bootstrap.hana87.club/collapse.html

【質問】
アコーディオンの書き方が間違っているのでしょうか？アドバイスいただけると幸いです。

・index.html.erb

<% provide(:title, @title) %>
<h1><%= @title %></h1>

<div class="row">
  <div class="search_form">
    <%= render 'users/search_form' %>
  </div>
</div>

<%= will_paginate %>

<% unless @users.empty? %>
  <ul class="users">
    <%= render @users %>
  </ul>
<% else %>
  <p class="search">
    ユーザーが見つかりませんでした。<br>
    探しているユーザー名を確認してください。
  </p>
<% end %>

<%= will_paginate %>

・_user.html.erb

<li>
  <%= user.name %>
  <div class="panel panel-default collaps">
    <a href="#demo" data-toggle="collapse" class="btn btn-primary">クリック</a>
  </div>
  <div id="demo" class="collapse">
    リンク
  </div>
</li>

・seeds.rb

User.create!(name:  "管理者",
             email: "email@sample.com",
             password:              "password",
             password_confirmation: "password",
             admin: true)

59.times do |n|
  name  = Faker::Name.name
  email = "email#{n+1}@sample.com"
  password = "password"
  User.create!(name:  name,
               email: email,
               password:              password,
               password_confirmation: password)
end

行動規範の内容に同意します

回答1件

同一idは画面内に存在できませんので、今回のケースのように最初に記述されているもののみ「有効」となります。
idを別名つけてください。
動的になるのであれば連番でも良いです。

つまり出力的には現在の下記を

html
1<li>
2  ユーザー１
3  <div class="panel panel-default collaps">
4    <a href="#demo" data-toggle="collapse" class="btn btn-primary">クリック</a>
5  </div>
6  <div id="demo" class="collapse">
7    リンク
8  </div>
9</li>
10
11<li>
12  ユーザー２
13  <div class="panel panel-default collaps">
14    <a href="#demo" data-toggle="collapse" class="btn btn-primary">クリック</a>
15  </div>
16  <div id="demo" class="collapse">
17    リンク
18  </div>
19</li>

下記のようになるように

html
1<li>
2  ユーザー１
3  <div class="panel panel-default collaps">
4    <a href="#link1" data-toggle="collapse" class="btn btn-primary">クリック</a>
5  </div>
6  <div id="link1" class="collapse">
7    リンク
8  </div>
9</li>
10
11<li>
12  ユーザー２
13  <div class="panel panel-default collaps">
14    <a href="#link2" data-toggle="collapse" class="btn btn-primary">クリック</a>
15  </div>
16  <div id="link2" class="collapse">
17    リンク
18  </div>
19</li>