Multiple markups having same id in html/js

Question

I have a table which has multiple rows and the first column of each row contains a button . This button in each row needs to perform some common operation based on the data in other columns of that row.

Is it advisable to assign a common "id" to all the buttons as they will be calling the same function on click, just with different parameters. OR Instead of using "id" should I be assigning a custom class to these buttons and then for all markups having the custom class , I could define the onclick behaviour?

Which approach is the better accepted practise?

You can't use common `id` attributes as they must all be unique, so using a `class` is the only way forward. — Rory McCrossan, Jul 04 '16 at 07:26
`id` must be unique in your each and every `html` markup, It is best practice to create a class for it/ — Kalpesh Rajai, Jul 04 '16 at 07:26

score 0 · Answer 1 · answered Jul 04 '16 at 07:26

To assign a common action, I would assign a specific class to each button and keep their id's unique. Unless I'm wrong I do believe that it is bad practice to use the same id twice, as they're supposed to be used to uniquely identify an element. If you assign the same class to each button, you can easily use jQuery for example, to find all of those buttons and assign a handler to them.

score 0 · Answer 2 · answered Jul 04 '16 at 07:31

0

Use a class like this.

<button class="someCommonClassName"></button>

answered Jul 04 '16 at 07:31

bala

436
1
4
19

score 0 · Answer 3 · answered Jul 04 '16 at 07:31

0

You should go for Class or you can use name property

 <button name="common name" onclick="CommonFunction();"></button

answered Jul 04 '16 at 07:31

Nikhil Ghuse

1,258
14
31

score 0 · Answer 4 · edited May 23 '17 at 12:08

It's definitely not advised to use the same ID for elements as JavaScript will return the first item. Example

<p id="same-id">Shirts</p>
<p id="same-id">Pants</p>

The selection with JavaScript will target the paragraph with Shirts only

You can however use classes or data-attributes for more semantic markup like so:

Using Classes

<p class="same-class">Shirts</p>
<p class="same-class">Pants</p>

Using data attributes

<p data-attribute_name="some_value">Shirts</p>
<p data-attribute_name="some_value">Pants</p>

Then with jQuery you can use $('[data-attribute_name]="value"'); OR with JavaScript you can use a similar method from this question

Multiple markups having same id in html/js

4 Answers4