jquery でon(click )が一つ目しか反応しない。

Question

同じidを複数に与え、jqueryを発動させたいと考えているのですが一つ目しか反応してくれません。
他の二つは無反応です。
一つ目と同じ動きをさせる方法を教えてください。
宜しくお願い致します。

html
<div class="1">
<p id="testes">testes</p>
</div>

   <div class="2">
  <p id="testes">testes</p>
     </div>

   <div class="3">
  <p id="testes">testes</p>
    </div>

jquery
$(function){
$('#testes').on('click',function(){

 var html = $(this).parent().prop('outerHTML');

           localStorage.setItem(html,html ); 

})
}

Comments

[x_x]

そもそもHTMLが正しくないというのは無視なのでしょうか？

[sk_3122]

id は重複不可ですね。同じ動きを 複数の部品でさせたい というのであれば class を使うべきですかね。

[退会済みユーザー]

IDをclassに変更したところ希望どうりの動きになりました！ありがとうございます！

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

Answer 1

HTMLにおいて、id要素は一意である(≒重複してはいけない)必要があります。

よって、例えば以下のようにidではなくclassに変更したりすれば重複していても動作します。

<div class="1">
<p class="testes">testes</p>
</div>

<div class="2">
<p class="testes">testes</p>
</div>

<div class="3">
<p class="testes">testes</p>
</div>

$(function){
$('.testes').on('click',function(){

var html = $(this).parent().prop('outerHTML');

localStorage.setItem(html,html ); 
})
}

Answer 2

$(function){
$('[id=testes]').on('click',function(){

var html = $(this).parent().prop('outerHTML');

localStorage.setItem(html,html ); 
})
}

これでどうでしょうか

-追記-
ボタンを押した後の動きの事でしたね見間違えてました。
失礼しました。

$(this)ですとクリックされた要素しか動きませんので
タグ指定かID指定すればよいと思います

Comments

[退会済みユーザー]

回答ありがとうございます。
IDの重複が原因でした、classに変更したところ希望どうりの動きになりました。