具有变量id的Bootstrap折叠数据目标

Question

我有一系列元素列表。我想使用bootstrap中的可折叠按钮折叠每个内部列表。我试过这个：

<button id="button" type="button" data-toggle="collapse" data-target="#demo" style="display : hidden">
   Click to collapse
</button>

<c:forEach items="${list.elements}" var="element">
   <div id="collapsibleElement" class="collapse in">
      ${element.content}
   </div>
</c:forEach>

如果我在列表中只有一个元素，单击文本折叠后的按钮，则此方法有效。但是，它不适用于列表中的更多元素。创建了正确数量的按钮，但是在单击任何按钮后，只有第一个按钮下的文本会折叠。

所有元素的id保持不变，我的猜测是这可能是问题的原因。有任何建议如何解决这个问题？