送信したメッセージの削除ボタンをそのメッセージをclickしたら表示され、もう一度clickすると隠れるようにしたい

前提・実現したいこと

railsとJavaScriptを使いLINEのようなチャットアプリを作成しています。
送信したメッセージをclickした際に削除ボタンを表示させ、もう一度同じメッセージをクリックすると削除ボタンが隠れるようにしたいです。
現時点ではメッセージをclickすると削除ボタンは表示されて、もう一度同じメッセージをclickしても削除ボタンは表示されたまま。
他のメッセージを押すと表示されていた削除ボタンは非表示になるという感じです。
この他のメッセージをclickすると削除ボタンが非表示になる機能は保持したままでお願いします。

該当のソースコード

html
1          
2          <div class="mycomment">
3            <a class="delete-btn hidden" id="destroy" rel="nofollow" data-method="delete" href="/rooms/7/messages/40">削除する</a>
4            既読
5            03/04 17:30
6            <p class="my">あ</p>
7          </div>
8          <div class="mycomment">
9            <a class="delete-btn hidden" id="destroy" rel="nofollow" data-method="delete" href="/rooms/7/messages/47">削除する</a>
10            既読
11            03/04 21:55
12            <p class="my">こんにちは</p>
13          </div>
14          <div class="mycomment">
15            <a class="delete-btn hidden" id="destroy" rel="nofollow" data-method="delete" href="/rooms/7/messages/48">削除する</a>
16            既読
17            03/04 21:55
18            <p class="my">あ</p>
19          </div>
20          <div class="mycomment">
21            <a class="delete-btn hidden" id="destroy" rel="nofollow" data-method="delete" href="/rooms/7/messages/49">削除する</a>
22            既読
23            03/04 21:55
24            <p class="my">あ</p>
25          </div>
26         
27

ruby
1<% @messages.each do |message|%>
2      <% if user_signed_in? %>
3        <% if message.user_id == current_user.id %>
4          <div class="mycomment" >
5            <%= link_to '削除する', room_message_path(@room,message), method: :delete, class: "delete-btn hidden", id: "destroy"%>
6            <%= message.read ? '既読' : '  '%>
7            <%= l message.created_at, format: :short%>
8            <p class='my'><%= message.content %></p>
9          </div>
10        <% else %>

javascript
1function pullDown(){
2  
3  const myComment = document.querySelectorAll(".my")
4
5  myComment.forEach(function(list) {
6
7  list.addEventListener('click', function(){
8    
9    const deleteButtons = document.querySelectorAll(".delete-btn")
10    deleteButtons.forEach(button => button.classList.add("hidden") )
11
12    const deleteButton = list.parentNode.querySelector(".delete-btn")
13    deleteButton.classList.toggle("hidden")
14    
15  })
16  })
17}
18
19document.addEventListener("turbolinks:load", pullDown)

試したこと

javascript
1const deleteButtons = document.querySelectorAll(".delete-btn")
2    deleteButtons.forEach(button => button.classList.add("hidden") )

これをif文で

js
1if(list.parentNode.querySelector(".hidden") == null){
2      const deleteButtons = document.querySelectorAll(".delete-btn")
3      deleteButtons.forEach(button => button.classList.add("hidden") )
4    }