Problema con la repeticion

[brai_lf]

Hola, mi problema es el siguiente: encontre en internet un codigo que lo que hace es que cuando se clickea en un link, se despliega un div con informacion. el problema es que si quiero hacer esto con varios links, solo me funciona el primero.
Este es el codigo:

<script type="text/javascript" src="../jquery/DesplegarDiv.js"></script>

<script type="text/javascript">
$(function(){
$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});
});
</script>

y el codigo html es el siguiente:

<div>
<a href="#" id="mostrar">Eventos</a>

<div id="caja">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>


Por si no se entendio lo que yo quiero hacer es poner varios de estos div pero como el codigo javascript se maneja con el id "caja" y el id "mostrar" al poner varias veces, pasa a funcionar solo el primero.

saludos

[brai_lf]

PD: de nada serviria que en vez de id sea class, por que lo que esto generaria es que al clikiar se desplieguen todos

[brai_lf]

Por favor, todavia no logre solucionarlo. estube leyendo y tal vez podria usar el (this) para dercir que habra la caja del mostrar que clickie. pero como se haria?

[Dradi7]

puedes hacer lo siguiente

Código HTML:

<a href="#" id="mostrar1" />
<a href="#" id="mostrar2" />
<a href="#" id="mostrar3" />
<a href="#" id="mostrar4" />
 

Código Javascript:

$(document).ready(function(){
$('a[id^="mostrar"]').click(function(){
$("#caja").slideToggle();
event.preventDefault();
});
});
 

[brai_lf]

Hola, te comento que no me funciona esto que pusiste. ademas te digo que haciendolo en ese caso, el estilo del id mostrar no funcionaria ya que cambian todos los id. saludos

[Dradi7]

Pero en todo caso puedes hacer esto

Código HTML:

<a href="#" class="mostrar1" >a</a>
<a href="#" class="mostrar2" >a</a>
<a href="#" class="mostrar3" >a</a>
<a href="#" class="mostrar4" >a</a>
 

Código Javascript:

$(document).ready(function(){
    $('a[class^="mostrar"]').click(function(){
        alert('hola');
        event.preventDefault();
    });
});