【Rails/Bootstrap】同一ページに同じ投稿が２つ以上表示されている場合に、カルーセルが不具合を起こす場合の対処法

同じページ内に同じ投稿（IDが同じ）を２つ以上表示したときに、１つ目の投稿しかカルーセルが作動しないという問題が起き、解決できたため備忘録として書きます。

具体的には、マイページ内に自分が投稿した記事と、ブックマークした記事を表示させようとしたときに起こりました。ブックマークした記事（post_id=1とする）の画像をカルーセルで遷移させようとしたら、自分が投稿した記事(post_id=1)の方が動いてしまうという現象に会いました。

ほとんど自力で解いたため、至らない点が多々あると思いますがご了承ください。

前提

bootstrap使用

解決方法

結論から申し上げますと、各カルーセルに一意のIDを付けることで個別に制御することができました。

<% @posts.each_with_index do |post, i| %>
 <div class="card shadow img-thumbnail">
  <div id="carouselExampleIndicators<%= i %>" class="carousel slide" data-touch="false">
    <!-- その他のコード -->
  </div>
 </div>
<% end %>

解説

<% @posts.each_with_index do |post, i| %>

@posts=Post.all

ここではeach_with_indexメソッドを使い、@postsの要素と番号を取得しています。
each_with_indexメソッドは、要素を繰り返し処理を行いますが、それと同時にその要素が何番目に処理されたのかも表すことができます。

<div id="carouselExampleIndicators<%= i %>" class="carousel slide" data-touch="false">

ここでは、Bootstrapのカルーセルをclassに指定してます。
id="～"は、各カルーセルのIDを一意にするために番号を振っています。
これによって、同じpost_idでも一意のIDを持つことができるため、同じページに表示しても正常にカルーセルが作動します。

参考

https://magazine.techacademy.jp/magazine/19842