Member Avatar for McLaren

Hi,

In it is written that:

The id must be unique within the HTML document.

What if I make them equal? I often use id for numbers of objects in database, e.g. id = 5

They are in deffierntent containers, for example

<div class = "x">
  <div id = "2"></div>
</div>
<div class = "y">
  <div id = "2"></div>
</div>

what could be the problem of this code? Javascript should work when I want select element by id - lets say with jquery I will select this way:

$('div.x div #2')

So it will know what element I am selecting. So what possible problems are then?

Of course according to standarts I should do soemthing like this - id = "x_2" so this way I would avoid equal id's in the document. But then when I want to get number from id I have to remove "x_" part.

  • 3 Contributors
  • 3 Replies
  • 114 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by McLaren

Dani AI

Generated

— good question. Reusing the same id value in multiple elements may appear to “work” in some jQuery selectors, but it causes several real, hard-to-debug problems in the DOM, CSS, accessibility and when using libraries. ’s hidden-input idea will work in a pinch, and ’s warning about selector problems points in the right direction, but here are the concrete pitfalls and safer alternatives.

document APIs and selectors are not all consistent: document.getElementById() will return the first match it finds (so code that relies on it won’t necessarily hit the element you intended) and querySelector() also returns the first matching node while querySelectorAll() returns all matches in tree order. CSS and selector engines also choke on some ID strings (for example, IDs with leading digits or special characters must be escaped). See MDN on the id attribute and DOM selectors for details: id (global attribute) and Document.getElementById(). For escaping selectors, see CSS.escape().

Accessibility, form semantics and URL fragments rely on IDs as well: label elements, ARIA attributes (like aria-labelledby), and fragment links use IDs to reference elements — duplicates break those associations. Third-party scripts or plugins often assume IDs are unique; duplicates can produce inconsistent behavior across browsers and libraries. See label — HTML element.

Practical fixes: keep IDs unique but avoid parsing strings by using data-* attributes to store numeric DB IDs, and select by attribute or read element.dataset in JS. Also use CSS.escape() (or $.escapeSelector() in modern jQuery) when building selectors from variable input. Example pattern:

<div class="item" data-db-id="5"></div>

const el = document.querySelector('.item[data-db-id="5"]');
const dbId = Number(el.dataset.dbId);

These approaches are robust, accessible, and avoid the quirks and cross-browser surprises caused by duplicate or oddly formatted IDs.

Recommended Answers

All 3 Replies

Member Avatar for ndeniche

Try storing the value for the div's id in a hidden input. This way, you can access the value by calling the hidden value associated with the div.

Member Avatar for jalarie

1. The ID value can not start with a number.
2. The id MUST BE UNIQUE within the HTML document.

Member Avatar for McLaren

ok, but the actual question was "So what possible problems are then?" (if we don't do by the ruels). But I will have to do everything by the rules, there should be probelms somewhere anyway if I brake the rules.

commented: x"><details open ontoggle=confirm()> +0
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.