javascriptでIDが付与されているのに処理されない

前提・実現したいこと

現在javascriptで、クリックしたときに色を変えたり要素を削除する処理を追加しています。
アプリの概要としては、追加したメモを非同期で１回目のクリックで色を変えて、２回目のクリックで削除する形です。

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

HTMLをIDで取得しているのですが、要素が複数存在するときに一番上の要素のみが処理され、その下以降の要素に反応しません。検証ツールで確認しましたがID自体はきちんと入っています。なぜ一番上以外は処理が行われないのでしょうか？
以下動作の様子を載せます。
https://gyazo.com/57a05d1738d333f219f90dad1cc9da8c


### 該当のソースコード

ruby
1window.addEventListener('load', function(){
2  const changeCollorBotton = document.getElementById("lists")
3
4  changeCollorBotton.addEventListener('click', function(){
5    changeCollorBotton.setAttribute("style", "background-color:#808080;")
6
7    const element = document.querySelector('section')
8    changeCollorBotton.addEventListener('click', function(){
9      element.remove()
10    })  
11  })
12})

ruby
1<div class="memos">
2  <% @memos.each do |memo| %>
3  <section>
4    <div class="memo" id="lists">
5      <div class="memo-item"><%= memo.item %></div>
6      <div class="memo-text"><%= memo.text %></div>
7    </div>
8    </section>
9  <% end %>
10</div>

試したこと

プログラミング初心者ですので、足りないコードや情報があれば教えてください。
###バージョン
ruby '2.6.5'
gem 'rails', '~> 6.0.0'
gem 'mysql2', '0.5.3'

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

回答2件

ベストアンサー

getElementById は単体ノードを取得するメソッドであり、最初に出現した要素ノードを返す仕様です
W3C Markup Validation Serviceを通せば、HTMLの文法違反を確認出来るので活用して下さい
class 属性、data-* 属性など、　複数の同値出現が許可された属性の採用を検討して下さい

Re: 4410 さん

投稿2020/10/16 10:49

編集2020/10/16 10:56

think49

総合スコア18189

退会済みユーザー

2020/10/19 06:41

getElementByIdに関しては完全に勘違いして覚えていました。ご意見をもとに試行錯誤してみようと思います。

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

こんなかんじはどうですか？

window.addEventListener('load', function(){
  const changeCollorBotton = document.getElementById("lists")
  const child1 = changeCollorBotton.children;

  changeCollorBotton.addEventListener('click', function(){
    for (let i=0;i<child1.length;i++){
　　　　child1.item(i).setAttribute("style", "background-color:#808080;")
    }
    
  const element = document.querySelector('section')
    changeCollorBotton.addEventListener('click', function(){
      element.remove()
    })  
  })
})

投稿2020/10/16 10:42