title: Is it ever acceptable to have multiple IDs in a html page?
body: <p>There's quite a few questions on Stack Overflow about <code>id</code> vs <code>class</code> but these questions are nearly always in relation to CSS - and the generally accepted answer is to use classes to style a particular set of elements, and ids for specific instances.  Makes sense, fair enough.</p>
  
  <p>I'm finding however that as I do more and more Javascript/jQuery/ajax, that approach is starting to become less clear cut and I'm finding situations where semantically elements should be given ids, but because there could be multiple instances I'm supposed to use classes.</p>
  
  <p>Here's an example of what I mean:</p>
  
  <p>Take a look at the toolbar on Stack Overflow's markdown question editor - each button has an ID to uniquely identify it.  Makes perfect sense - it's one button that performs a specific function and there's probably script hooked to it based on that id.</p>
  
  <p>Now imagine that I'm building a rich web app and there's a page that has two tabs each with a markdown editor on it.  Does this mean that the toolbar buttons should now be using <em>classes</em> to <em>identify</em> them? </p>
  
  <p>This just seems wrong.  </p>
  
  <p>Another example: I'm working on a photo gallery site that has a little toolbar overlaid on each photo.  Convention says that because there's multiple instances of these buttons I should use classes.  Really?</p>
  
  <p>So my questions are....</p>
  
  <ul>
  <li>If I commit the crime of duplicate IDs on a page, which browsers will actually break?</li>
  <li>For browsers where this does break, is it just the CSS styling that will break, or will jQuery selectors also break.</li>
  <li>Is it really so bad to use duplicate ids in cases like those described.</li>
  </ul>