モーダルを使ってコメント削除を実現したい

前提・実現したいこと

現在、ある投稿に対して他の人がコメントをするという普通の掲示板を作っているのですが、コメント欄に直接削除ボタンを作ったら邪魔だったのでモーダルを使い、右端の矢印を押すことで削除ボタンが出てきて自分がしたコメントが削除できるということを実現したいです。

発生している問題・エラーメッセージ

モーダルを導入する前はコメント機能全般に難がなく、コメントの隣にある削除ボタンを押せばそのコメントが削除されていました。
しかしモーダルを導入したところ、削除したいコメントの隣にある削除ボタンを押してもそのコメントが削除されず一番上のコメントから削除されるようになりました。

エラーメッセージ

該当のソースコード

_comment.html.erb

<% @post.comments.each do |comment| %>
  <div class="post-com">
    <div class="com-body">
      <div class="com-font">
        <div class="com-user">
          <%= link_to comment.user.name, user_path(id: comment.user.id) %>
          <% if user_signed_in? && comment.user_id == current_user.id %>
           <!-- Button trigger modal -->
            <button class="fa_icon" data-toggle="modal" data-target="#exampleModal">
              <%= fa_icon 'angle-down'%>
            </button>
          <% end %>
        </div>
        <%= comment.content %>
      </div>
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1"
        role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">コメントを削除しますか？</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <%= link_to '削除', [comment.post, comment], method: :delete,
             class: "btn btn-danger d-button" %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>

試したこと

Bootstrapにあるモーダルのコードをコピーして来て自分が作ってるアプリに合うように調整しましたが、javascriptがイマイチわからずjsファイルはいじってません。

恐らく削除したいコメントのデータがうまく伝わっていないからこういったことになるんだと思いますが、何かアドバイスなどあれば教えていただきたいです。お願いします。

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

回答1件

ベストアンサー

これはコメントの数だけ fade 状態のモーダルが作成されて、どの矢印を押しても最初の一つが出現するっていう挙動ですね。
モーダルの識別子がすべて同じになっているのが原因で、次のような感じにすると正しい挙動になるはずです。

diff
1          <% if user_signed_in? && comment.user_id == current_user.id %>
2           <!-- Button trigger modal -->
3-           <button class="fa_icon" data-toggle="modal" data-target="#exampleModal">
4+           <button class="fa_icon" data-toggle="modal" data-target="#exampleModal<%= comment.id %>">
5              <%= fa_icon 'angle-down'%>
6            </button>
7          <% end %>
8        </div>
9        <%= comment.content %>
10      </div>
11      <!-- Modal -->
12-     <div class="modal fade" id="exampleModal" tabindex="-1"
13+     <div class="modal fade" id="exampleModal<%= comment.id %>" tabindex="-1"
14        role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
15        <div class="modal-dialog" role="document">