Problemmer med css i usercontrol

Jeg har lavet en usercontrol med en kalender, hvor jeg bruger css til at få vist kalenderen når man trykker på en knap, så kan man vælge en dato som så bliver indsat i et tekstfelt, og kalenderen lukkes igen:

<TD width="40"><asp:TextBox CssClass="inputText"  Width="80" id="dato" runat="server"/></TD>
<td width="30"><a href="#" onclick="st=document.getElementById('calDiv1').style;pos=getPos(this);st.left=pos.x-120+'px';st.top=(pos.y+22)+'px';st.display=(st.display!='block')?'block':'none';"><img src="images/VaelgDato.jpg" border="0"></a>
<div id="calDiv1" style="<%if(!calenderAkt){%>display:none;<%}%> Z-INDEX: 1; LEFT: 314px; POSITION: absolute; TOP: 114px; if: none">

<asp:calendar........

problemet er navnet på mit div tag "<div id="calDiv1"..." og i onclick "getElementById('calDiv1')" de ændre sig ikke når jeg indsætter den usercontrol på en side. Det giver mig så et problem når jeg bruger 2 af denne user control på samme side.

Hvordan løser jeg dette problem?

Jeg havde tænkt på at sætte en variabel når man placerede usercontrollen eks. calId="1" og den næste calId="2" og så klister denne varibel efter "calDiv" eks. "getElementById('calDiv<%=calId%>')".

Jeg havde også tænkt på om man kunne få fat i den id som man tildeler usercontrollen på siden og bruger den til det samme som ovenstående?

Eller er der en bedre og mere korrekt løsning?