El ID siempre debe ser único

¿Quién es quién? Este es Juan y aquel es Pedro; más fácil, este es Juan y aquella es Antonia. Facílisimo. No es necesario saber sus nombres para identificarlos y no confundirlos pero, pese a lo que muchos creen, las computadoras son idiotas. Es decir, hacen cuentas muy pero muy rápido pero ignoran todo lo que no les explicamos con pelos y señales.

Ese es el problema con los IDs que tanto se utilizan y que tantos problemas causan cuando ponemos dos cosas con el mismo nombre y sólo funciona una de ellas.

El ID se utiliza para IDentificar algo y ese algo debe ser ÚNICO, sólo debe haber uno con ese nombre en toda la página; si no lo es, el navegador no sabrá a cuál nos referimos cuando le decimos que haga algo. Por eso, los IDs no se ponen en todas las etiquetas, sólo los usaremos cuando sea necesario y la regla genérica dice que deberíamos reservalos exclusivamente para los sectores importantes, para definir los grandes rectángulos que conforman un sitio web: el header, las columnas, el footer, etc.

Pero, también los usamos cuando requerimos identificar sectores auxiliares, cualquier cosa que se nos ocurra manipular con JavaScript.

Vamos a un ejemplo que no funcionará.

Una funcióm simple que permuta la visibilidad de una etiqueta. Dado su ID, si está oculta se muestra y si está visible se oculta:

<script>
  function toggletag(cual) {
    var elElemento = document.getElementById(cual);
    if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
    } else {
      elElemento.style.display = 'block';
    }
  }
</script>

Ponemos dos DIVs y queremos ocultar el segundo pero ... en ambos hemos usado el mismo ID:

<div id="mi_id" style="display:block;"> Este es un DIV cualquiera ... </div>
<div id="mi_id" style="display:block;"> Este es el DIV que quisiera ocultar ... </div>
<a href="javascript:toggletag('mi_id');">click</a>

El resultado será este:

Este es un DIV cualquiera ...

Este es el DIV que quisiera ocultar ...

click

No funciona. Se oculta el primero y no el segundo ya que el navegador lo encontró primero e ignora al otro.

Todo se debe a ese detalle, ambos tienen el mismo ID así que, para que esto funcionara, deberíamos ponerles nombres diferentes:

<div id="mi_id_1" style="display:block;"> Este es un DIV cualquiera ... </div>
<div id="mi_id_2" style="display:block;"> Este es el DIV que quisiera ocultar ... </div>
<a href="javascript:toggletag('mi_id_2');">click</a>

Este es un DIV cualquiera ...

Este es el DIV que quisiera ocultar ...

click

Y todos felices ...