How to Alert target id of multiple sets of ul list elements?

Question

I have list elements as below :

<ul id="listSet">
<li id="dy1">Dynamic values</li>
<li id="dy2">Dynamic values</li>
</ul>

id of li is dynamic and populated from database.

When i click any item i.e Dynamic Values their id is shown as alert .

Code to show alert :

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('listSet');
ul.onclick = function(event) {
    var target = getEventTarget(event);
    alert(target.id);
};

But i have multiple sets of ul which are retrieved from database , for example as :

<ul id="listSet">
<li id="dy1">Dynamic values</li>
<li id="dy2">Dynamic values</li>
</ul>

<ul id="listSet">
<li id="dy3">Dynamic values</li>
<li id="dy4">Dynamic values</li>
</ul>


<ul id="listSet">
<li id="dy5">Dynamic values</li>
<li id="dy6">Dynamic values</li>
</ul>

Using same script for alert , shows click alert for only first set of ul , How to show alert when click any item under li with ul id = "listSet" ?

Thanks

Answer 1

There must not be multiple elements in a document that have the same id value.

Use class instead of ID attribute and getElementsByClassName or querySelectorAll to select elements.

[].forEach.call is used to iterate elements having length property, for-loop could be used as well.

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

var ul = document.getElementsByClassName('listSet');
[].forEach.call(ul, function(el) {
  el.onclick = function(event) {
    var target = getEventTarget(event);
    alert(target.id);
  };
});

<ul class="listSet">
  <li id="dy1">Dynamic values</li>
  <li id="dy2">Dynamic values</li>
</ul>

<ul class="listSet">
  <li id="dy3">Dynamic values</li>
  <li id="dy4">Dynamic values</li>
</ul>


<ul class="listSet">
  <li id="dy5">Dynamic values</li>
  <li id="dy6">Dynamic values</li>
</ul>

Answer 2

The HTML spec required the ID attribute to be unique in a page:

This attribute assigns a name to an element. This name must be unique in a document.

If you have several elements with the same ID, your HTML is not valid.

So, getElementById() should only ever return one element. You can't make it return multiple elements.

You can use getElementByClassName then use some kind of loop on all retrieved elements and attach events on them.

Answer 3

elements can't have same ID but could have same class name anyway with do not need class name or id attr of ul element, it's easy to handle it with Jquery use below code

$("li").on("click",function(){
id=$(this).attr("id");
alert(id);
});

and see the live demo at below link https://jsfiddle.net/kjakzc7d/