Bootstrap generate new collapse jquery for each iteration?

Question

I'm using Bootstrap styling for our office database from a rails g scaffolding. I'm looking to use Bootstrap's collapse.js plugin to list all our product's info. However, when it iterates over each product, it wont generate a new href and id so that each accordion will close and open with it's appropriate product (it just uses #collapse1 each time). How can I have each iteration create new href and id so that it will work correctly (i.e. #collapse2, #collapse3, etc.)?

I hope that makes sense. Thank you!

<% @products.each do |product| %>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
      <%= product.Name %>
    </a>
  </h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">
    <%= product.name %>
    <%= product.group %>
    <%= product.price %>
    <%= link_to 'Show', product %>
    <%= link_to 'Edit', edit_product_path(product) %>
    <%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %>

  </div>
</div>
</div>
</div>
<% end %>

Answer 1

Try something like this:

<a data-toggle="collapse" data-parent="#accordion" href='<%= "#collapse_#{product.id}" %>'>

and:

<div id='<%= "collapse_#{product.id}" %>' class="panel-collapse collapse in">