I have a table generated from XML using XSLT which is filtered using JavaScript. I'm trying to create a popup div, centered on the page, which is toggled from a link in each row of the table. The link must open the other informaiton found in the XML for that row id not already shown in the row.

My plan was to use a DIV formatted in a manner where the rest of the product information shows up when the link is selected and a close option in the DIV will make the div close. The problem lies with giving the DIV a unique ID. I do have a numeric data in the XML for each product which is never duplicated so may be used as the unique ID.

Please help, I've been looking for an answer for over five hours today and eight hours yesterday and am coming to the end of my wits.

Code:
<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <head>
	<LINK rel="stylesheet" href="support/table.css"></LINK>
	<script type="text/javascript" src="support/table.js"></script>
	<script type="text/javascript" src="support/popup.js"></script>
  </head>
  <body>
  <table align="center" id="t1" class="content table-autosort table-autofilter table-autopage:10 table-stripeclass:alternate table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount">
	<thead>
		<tr>
			<th class="table-filterable table-sortable:numeric">HPN</th>
			<th class="table-filterable table-sortable:numeric">Series</th>
			<th class="table-filterable table-sortable:default">Style</th>
			<th class="table-filterable table-sortable:default">Material</th>
			<th class="table-filterable table-sortable:default">Disposition</th>
			<th class="table-filterable table-sortable:default">Replacement Part</th>
			<th class="table-filterable table-sortable:default">Tip Assembly</th>
			<th class="table-filterable table-sortable:default">Notes</th>
			<th>Application</th>
		</tr>
	</thead>
	<tbody>
	<xsl:for-each select="nozzletips/tip">
	<xsl:sort select="series"/>
	<xsl:sort select="tipstyle"/>
	<xsl:sort select="application"/>
		<tr>
			<td><xsl:value-of select="hpn"/></td>
			<td><xsl:value-of select="series"/></td>
			<td><xsl:value-of select="tipstyle"/></td>
			<td><xsl:value-of select="material"/></td>
			<td><xsl:value-of select="disposition"/></td>
			<td><xsl:value-of select="replacement"/></td>
			<td><xsl:value-of select="assembly"/></td>
			<td><xsl:value-of select="application"/></td>
			<td>
				<a href="javascript:toggleDiv("className")">More Information</a>
				<div class="className" style="border:1px solid #000000;text-align:center;width:450px;position:absolute;margin:auto;height=50px;background-color:white;left:0;">HPN: <xsl:value-of select="hpn"/><br />Series: <xsl:value-of select="series"/><br />Some Information</div>
			</td>
		</tr>
	</xsl:for-each>
	</tbody>
	<tfoot>
		<!--tr>
			<td class="table-page:previous" style="cursor:pointer;">&lt; &lt; Previous</td>
			<td colspan="10" style="text-align:center;">Page <span id="t1page"></span>&nbsp;of <span id="t1pages"></span></td>
			<td class="table-page:next" style="cursor:pointer;">Next &gt; &gt;</td>
		</tr-->
		<tr>
			<td colspan="12"><span id="t1filtercount" style="margin-right:2px;"></span> of <span id="t1allcount" style="margin-right:2px;"></span> parts match filter(s). <a href="javascript:location.reload(true);">Reset Filters</a></td>
		</tr>
	</tfoot>
  </table>
  </body>
  </html>
</xsl:template>

</xsl:stylesheet>