確認ボタンをクリックし、データを保存した後に確認済リストボタンが押せなくなる！

Question

##前提・実現したいこと
2/8より学習を開始したプログラミング初心者です。
スタッフ間で使用するオリジナルWebアプリ作成ています。
新商品の確認ボタン（『Webで確認』『実際に確認』の2個）と確認者リストボタン（『Webで確認の確認者リスト』『実際に確認の確認者リスト』のこちらも2個）を実装中です。
問題が起きているのは『実際に確認の確認者リストボタン』の方です。
『実際に確認』クリックしデータを保存して、いざ『確認者リストボタン』をクリックしようとしてもなぜか押せなくなってしまいます。
『実際に確認』クリックする前はちゃんと押せて、かつ確認者リストもプルダウンで表示されます。
ちなみにWebで確認の方は全ての動作が滞りなくできます

##該当のソースコード

    <div class="confirmation_room">
      <div class="confirmation_contents">
        <div class="button">
          <% if @item.liked_by?(current_user) %>
            <div>・確認済</div>
            <span style="cursor: hand; cursor:pointer;">
              <div id="confirmed_list1">・確認者リスト</div>
            </span>
          <% else %>
            <%= link_to "・webで確認", item_web_confirmations_path(item_id: @item.id), method: :post, remote: true, id: @item.id, class: 'confirmation_button', id: "confirmed1" %>
            <span style="cursor: hand; cursor:pointer;">
              <div id="confirmed_list1">・確認者リスト</div>
            </span>
          <% end %>
        </div>
      </div>
      <ul class="confirmed_lists hidden" id="pull_down1">
        <% @web_confirmations.each do |f| %>
          <li class="pull_down_list" ><%= f.user.user_name %></li>
        <% end %>
      </ul>
      <div class="confirmation_contents">
        <div class="button">
          <% if @item.liked_by?(current_user) %>
            <div>・確認済</div>
            <span style="cursor: hand; cursor:pointer;">
              <div id="confirmed_list2">・確認者リスト</div>
            </span>
          <% else %>
            <%= link_to "・実際に確認", item_local_confirmations_path(item_id: @item.id), method: :post, remote: true, id: @item.id, class: 'confirmation_button', id: "confirmed2" %>
            <span style="cursor: hand; cursor:pointer;">
              <div id="confirmed_list2">・確認者リスト</div>
            </span>
          <% end %>
        </div>
      </div>
      <ul class="confirmed_lists hidden" id="pull_down2">
        <% @local_confirmations.each do |f| %>
          <li class="pull_down_list" ><%= f.user.user_name %></li>
        <% end %>
      </ul>
    </div>

window.addEventListener('load', function(){

  //以下webの方の確認・確認者リストボタン
  const confirmedList1 = document.getElementById("confirmed_list1")
  const pullDownParents1 = document.getElementById("pull_down1")
  const confirmed1 = document.getElementById("confirmed1")

  confirmedList1.addEventListener('mouseover', function(){
    this.setAttribute("style", "color: red;")
  });
  confirmedList1.addEventListener('mouseout', function(){
    this.removeAttribute("style", "color: white;")
  });
  confirmedList1.addEventListener('click', function() {
    if (pullDownParents1.getAttribute("style") == "display:block;") {  
      pullDownParents1.removeAttribute("style", "display:block;")  
    } else {
      pullDownParents1.setAttribute("style", "display:block;")  
    }
  });

  confirmed1.addEventListener('click', function() {
    this.textContent = '・確認済';
  });
  confirmed1.addEventListener('mouseover', function() {
    this.setAttribute("style", "color: red;")
  });
  confirmed1.addEventListener('mouseout', function(){
    this.removeAttribute("style", "color: white;")
  });



  //以下実際の方の確認・確認者リストボタン
  const confirmedList2 = document.getElementById("confirmed_list2")
  const pullDownParents2 = document.getElementById("pull_down2")
  const confirmed2 = document.getElementById("confirmed2")
  
   confirmedList2.addEventListener('mouseover', function(){
    this.setAttribute("style", "color: red;")
   });
   confirmedList2.addEventListener('mouseout', function(){
     this.removeAttribute("style", "color: white;")
   });
   confirmedList2.addEventListener('click', function() {
    if (pullDownParents2.getAttribute("style") == "display:block;") {  
      pullDownParents2.removeAttribute("style", "display:block;")  
    } else {
      pullDownParents2.setAttribute("style", "display:block;")
    }
   });

   confirmed2.addEventListener('click', function() {
    this.textContent = '・確認済';
   });
   confirmed2.addEventListener('mouseover', function() {
     this.setAttribute("style", "color: red;")
   });
   confirmed2.addEventListener('mouseout', function(){
     this.removeAttribute("style", "color: white;")
   });
});

##試したこと
データ保存後、何かの要素が覆い被さってしまっているのかと思いz-indexなどで試してみましたが変わりませんでした。
基本的に2つの確認ボタンはid名が違うだけなのになぜなのかがまたくわかりません。
しかもデータ保存後のみ、、
昨日夜から解決できていないので、ぜひお願いいたします。

Comments

[yambejp]

初心者マークがつけられたと思うので、つけておいて損はないと思います

[ko.nakamura]

ありがとうございます！
追加いたしました

[winterboum]

確認済リストボタン　が見当たりませんが？
viewにある文字列と同じ物にしていただくとか、
「この行の」　とか誤解のない様に書いてください

[ko.nakamura]

ご指摘ありがとうぎざいます！
確認者リストでしたので修正いたします。