document.getElementById Problem

[Peet]

Folgendes dummes Problem:

Weil der IE für CSS zu blöd ist möchte ich eine Infobox per Javascript einblenden. Das problem ist, dass es das HTML dynamisch mit der Smarty Schablone erzeugt wird. Dieser Teil steht also in einer Schleife. Ergebnis ist, dass es nun die id="info" mehrmals gibt.

Expertenmeinungen:<br />
<a href="../images/person/{$latestProduct.pic}" onmouseover="show()" onmouseout="hide()">{$latestProduct.name_f} {$latestProduct.name_l}</a>
<div id="info">
<img src="../images/person/{$latestProduct.pic_person}" alt="{$latestProduct.name_f} {$latestProduct.name_l}" /><br />
            {$latestProduct.comment}
</div>

<script language="JavaScript" type="text/javascript">
<!--
function hide() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        if(document.getElementById) {
            document.getElementById("info").style.display = "none";
 }
    }
}

function show() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        if(document.getElementById) {
            document.getElementById("info").style.display = "block";
 }
    }
}

Erkennt jemand das Problem und hat einen Lösungsvorschlag?