Problema con script tabella/menu a scomparsa

[CasAmicaMia]

Ciao a tutti, sono autodidatta per questo chiedo il vostro gentile aiuto! Ho uno script che mi piace molto e vorrei utilizzarlo nel mio sito ma ho un problema, lo script funziona benissimo applicato ad una sola scritta o immagine, clicco per far apparire la descrizione ed appare, riclicco per farla scomparire e scompare... il problema nasce nel momento in cui voglio applicare lo script anche su una seconda scritta o immagine, se clicco sulla seconda immagine non si applica lo script sulla seconda ma sulla prima immagine e non so davvero come fare! Sicuramente mancano dei richiami o delle stringhe, io ci ho provato ma non ci sono riuscita!!! Vi incollo tutto così se qualcuno mi può aiutare vi ringrazio di cuore!

Questa è la parte che va incollata nel HEAD

<style type="text/css">
body{font: 76% Verdana, Arial, sans-serif}
a{color: #00f}
div#commenti{display:none}
div#commenti p{width: 450px;padding: 10px 0;
border:1px solid #68B0D8;background-color: #C8ECFF}
</style>
<script type="text/javascript">
function ShowAndHide(id1,id2){
if(document.getElementById){
el1=document.getElementById(id1);
el2=document.getElementById(id2);
if(el1.style.display=="none"){
el1.style.display="block";
el2.style.display="none";
}
else{
el1.style.display="none";
el2.style.display="block";
}
}
}
</script>

Questa è la parte che va incollata nel BODY


<table style="margin-top: 12; margin-bottom: 8" border="0" cellpadding="0" cellspacing="0" width="606" height="70">
<tbody>
<tr bgcolor="#FFFFCC">
<td valign="top" width="105" height="45"> <img alt="Mandaranci" src="mandaranci.jpg" border="0" height="70" width="100"></td>

<td valign="top" height="45" width="501">
<font style="font-size: 9pt" face="Verdana"><b> Mandaranci e Clementine </b></font>
<table width="48%">
<tr>
<div id="mostra">
<p><a href="#" onclick="ShowAndHide('mostra','commenti');return(f alse)"><img src="descrizione-leggitutto-ok.jpg" width="235" height="33"></a> </p>
</div>
<div id="commenti"><br>
<a href="#" onclick="ShowAndHide('mostra','commenti');return(f alse)"><img src="chiudi-finestra.gif" width="101" height="20"></a>
<p>Il mandarancio e' un frutto nato dalla fusione tra il mandarino e l'arancio,
ha l'aspetto del mandarino e l'aroma un mix dei due.
</p>
</div>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

<tbody>
<tr bgcolor="#FFFFCC">
<td valign="top" width="105" height="45">
<table style="margin-top: 12; margin-bottom: 8" border="0" cellpadding="0" cellspacing="0" width="606" height="70">
<tbody>
<tr bgcolor="#FFFFCC">
<td valign="top" width="105" height="45"> <img alt="Pere" src="pere.jpg" border="0" height="70" width="100"></td>
<td valign="top" height="45" width="501"> <font style="font-size: 9pt" face="Verdana"><b> Pere </b></font>
<table width="48%">
<tr>
<div id="mostra">
<p><a href="#" onClick="ShowAndHide('mostra','commenti');return(f alse)"><img src="descrizione-leggitutto-ok.jpg" width="235" height="33"></a>
</p>
</div>
<div id="commenti"><br>
<a href="#" onClick="ShowAndHide('mostra','commenti');return(f alse)"><img src="chiudi-finestra.gif" width="101" height="20"></a>
<p>Le proprieta' benefiche della pera sono diverse. Innanzi
tutto essa costituisce un frutto facilmente digeribile e,
quindi, e' indicato nell'alimentazione sia dei
bambini che degli anziani.
</p>
</div>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Se provate ad incollare in una pagine html le strighe vedrete che nella prima tabella lo script funziona perfettamente, nella seconda invece no ma si applica sempre alla prima!

Grazie!!!!!