'How to use same id multiple times in different div in a single html file

But the browser is only considering the first id, i have different buttons in my html file which will work as a pop up form.

javascripthtmljquerycss


Solution 1:[1]

Using the same id multiple times in a document is not allowed, and is invalid HTML. Look into using classes instead.

Solution 2:[2]

You should not use the same id on multiple elements. You could use the same class name and then set the event handler using the shared class instead of an id.

$(document).on('click', '.shared-class', function() {
    // prompt your modal
});

Solution 3:[3]

When I do the web scraping, I notice amazon best seller pages have the same id for multiple elements, however, it also offers another unique id attribute for its child , I am guessing that if you have a unique id for each child element in one HTML file, it's ok to have some sort of shared id attribute for the parent, although this seems to be against CSS id rules.

Solution 4:[4]

You could use document.querySelectorAll

const allDivs = document.querySelectorAll("#buttons");
allDivs.forEach(div=>{
    div.addEventListener(click,function(){})
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sean
Solution 2 Maggie Cody
Solution 3 Koo8
Solution 4 Brandon

Related Questions