送信したメッセージをclickした時にそのメッセージに対する削除ボタンを表示させたい

Question

前提・実現したいこと

railsとJavaScriptを使いLINEのようなチャットアプリを作成しています。
送信したメッセージをclickした際にそのメッセージに対する削除ボタンを表示させることができるようにしたいです。

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

今のところメッセージをクリックすると特定のメッセージのみの削除ボタンが表示させます。

該当のソースコード

<% @messages.each do |message|%>
      <% if user_signed_in? %>
        <% if message.user_id == current_user.id %>
          <div class="mycomment" >
            <%= link_to '削除する', room_message_path(@room,message), method: :delete, class: "delete-btn hidden", id: "destroy"%>
            <%= message.read ? '既読' : '  '%>
            <%= l message.created_at, format: :short%>
            <p id= 'mycomment' class='my'><%= message.content %></p>
          </div>
        <% else %>
          <div class="fukidasi">
            <div class="faceicon">
              <%= image_tag @room.celeb.image, class: 'img' %>
            </div>
            <div class="chatting">
              <div class="says">
                <p><%= message.content %></p>
              </div>
              <div class='created_at'>
                <%= l message.created_at, format: :short %>
              </div>
            </div>
          </div>
        <% end %>

function pullDown(){
  
  const myComment = document.querySelectorAll(".my")

  myComment.forEach(function(list) {

  list.addEventListener('click', function(){
    const pullDownParent = document.getElementById("destroy")
    if (pullDownParent.getAttribute("style") == "display:block;"){
      pullDownParent.removeAttribute("style", "display:block;")
    } else {
      pullDownParent.setAttribute("style", "display:block;")
    }
    
  })
  })
}

document.addEventListener("turbolinks:load", pullDown)

今の状態で送信したメッセージをclickしたところ@messages.each doで始めに表示されたmessageの削除ボタンがどのmessageをclickしても表示されます。

jsの方ではclass=my要素のものを全て取得しforEachでどのmessageをclickしても削除ボタンが表示されるようにはしました。しかしここでclickしたmessageにたいして("style") == "display:block;")を追加できるようにしたいです。

試したこと

const pullDownParent = document.getElementById("destroy")のgetElementByIdをquerySelectorAll(".destroy")としてforEachとしてみたのですが結果は変わりませんでした。

補足情報（FW/ツールのバージョンなど）

何かいい方法があれば教えていただきたいです！！
返信は１時間以内でできると思います！

Answer 1

id は同じ値が同じページに複数あってはダメです。
なので以下のidは一意な値になるよう変更するか削除しましょう。

<%= link_to '削除する', room_message_path(@room,message), method: :delete, class: "delete-btn hidden", id: "destroy"%>
---
<p id= 'mycomment' class='my'><%= message.content %></p>

表示状態を変化させたい要素はクリックした要素(list)の親(.mycomment)の子(.delete-btn)で、
hiddenクラスの有無で非表示にしているとすると、

list.addEventListener('click', function() {
  const deleteButton = list.parentNode.querySelector(".delete-btn")
  deleteButton.classList.toggle("hidden")
})

Comments

[so_ma]

回答ありがとうございます！！

jsの方の記述を変えたところうまく動きました。

また、回答にありましたidは一意性のあるものにしなければならないとありましたが、id = "mycomment"の要素はeachメソッドで自動的に付与されているのでeachメソッドを使っている限り一意性にできないのでは無いかと思います。自分が知らないだけで他に方法があれば是非教えていただきたいです！！

[so_ma]

また、回答された通りに書き直すことで思っていた通りに動いたのですが、
削除するというボタンを一つの要素のもののみ画面に表示されるようにしたいです。

<%= link_to '削除する', room_message_path(@room,message), method: :delete, class: "delete-btn hidden", id: "destroy"%>
のhiddenを状態にして１つ削除ボタンを表示させると、他のid= 'mycommentの要素をクリックしても表示されないようにしたいということです。

こちらもお力添えしていただけるとありがたいです！

[so_ma]

https://teratail.com/questions/325946?modal=q-comp
こちら上記の質問のURLになります！！

[neko_daisuki]

「eachメソッドで自動的に付与されている」とはどういう意味でしょうか。

たとえば以下のように書き換えれば消えるはずです。
<p class='my'><%= message.content %></p>

もしくは id にmessage の id 付け加えます
<p id="mycomment-<%= message.id %>" class='my'><%= message.content %></p>

[so_ma]

自分の勘違いでした????
ご指摘ありがとうございました！