ejs forEachで作成したdivにjqueyの動作が乗らない

前提

導入済み
・Node.js
・express
・ejs
・jquery(CDN)
・mysql接続モジュール

問題

これがejsでmysqlの情報を取得してforEachで自作サイトの記事アイテムを作成した時の画像です。

ejs
1       <div id="item_box">
2            <% items.forEach((news) => { %>
3                <div id="item">
4                    <!-- 画像 -->
5                    <img class="item-image" src=<%= news.image %> >
6　　　　　　　　　　　 <!-- 日付などの情報 -->
7                    <div class="item-text">
8                        略
9                    </div>
10                </div>
11            <% }); %> 
12        </div>

このようなプログラムで、sqlのデータをweb上に表示することはできましたが、次はこのアイテムをjqueryでアニメーションをつけたくて動作のテスト用にこのようなプログラムを組みました。

javascript
1$('#item').on('click', function() {
2  console.log("onclick!");
3});

このプログラムは上の画像にあるアイテムがクリックされたらコンソールに"onckick!"と出るプログラムで実際にejsで読み込んでみましたが、なぜか左のアイテムしかconsoleに表示されなくて右のアイテムは反応しません。

この問題はどうやれば解決できるのでしょうか...

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

回答2件

<div id="item">とありますが、同じidの要素をHTML内に複数出現させると、正しく動作しません。

投稿2021/11/23 05:05

maisumakun

総合スコア146018

anninsan

2021/11/23 12:11

解決方法などありますか？

maisumakun

2021/11/23 12:31

idではなくclassなどを使いましょう。

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

こちらのサイトから解決方法を得ることができました！

javascript
1//変更前
2$('#item').on('click', function() {
3  console.log("onclick!");
4});
5//変更後
6$('[id=item]').on('click', function() {
7  console.log("onclick!");
8});