Change div id on each do loop - ruby-on-rails

Question

Im using a bootstrap collapse item and have the code set up like this:
<% #tasks.each do |task| %>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><%= task.title %><p style="text-align:right;"><span class="glyphicon glyphicon-chevron-down"></span></p></a>
<p class="taskdescription"><%= task.description %></p>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<% task.subtasks.each do |subtask| %>
<li class="list-group-item"><%= subtask.title %></li>
<% end %>
</ul>
</div>
</div>
</div>
<% end %>
Which is outputting the correct list but with each item i need to increment the value of the div:
<div id="collapse1" class="panel-collapse collapse">
to
<div id="collapse2" class="panel-collapse collapse">
then
<div id="collapse3" class="panel-collapse collapse">
and so on until each item is displayed from the collection.
Thanks

Answer 1

Use each_with_index do |element, index| do ....
This was you have access to the element index and can use it as any rails variable.
<% #tasks.each_with_index do |task, index| %>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><%= task.title %><p style="text-align:right;"><span class="glyphicon glyphicon-chevron-down"></span></p></a>
<p class="taskdescription"><%= task.description %></p>
</h4>
</div>
<div id="collapse<%= index +1 %>" class="panel-collapse collapse">
<ul class="list-group">
<% task.subtasks.each do |subtask| %>
<li class="list-group-item"><%= subtask.title %></li>
<% end %>
</ul>
</div>
</div>
</div>
<% end %>

Answer 2

you can loop with each.with_index(1) and use the counter variable i to dynamically append the counter on the generated html.
<% #tasks.each.with_index(1) do |task, i| %>
<div class="panel-group">
<div class="panel panel-default">
...
<div id="collapse#{i}" class="panel-collapse collapse">
...
</div>
</div>
</div>
<% end %>