Dynamically Generating Table Using XML

I am in the process of writing a script that will dynamically generate a table using javascript and XML. I can get all of my data to feed in with no problem but am getting hung up on a few small syntax issues. Basically I need to assign a unique id equal to [i] (instead of id="answerDiv", in bold below) so that when calling showHide() it will show/hide one specific div.

Current Table Script
Code:
//table 2
document.write("<table id='tbl2' cellpadding='0' cellspacing='0' border='0' style='display: none; width:236px;'>");
var x=xmlDoc.getElementsByTagName("feature");
for (i=0;i<x.length;i++) {
document.write("<tr><td class='eventDate'>");document.write(x[i].getElementsByTagName("question")[0].childNodes[0].nodeValue);
document.write("</td><td class='eventText'>");
document.write(x[i].getElementsByTagName("content")[0].childNodes[0].nodeValue);
document.write('<a href="#" class="redLink triviaAnswer" onclick="showHide();">click for answer</a><br><br>
<div id="answerDiv" style="display:none">');
document.write(x[i].getElementsByTagName("answer")[0].childNodes[0].nodeValue);
document.write('</div></td></tr><tr><td colspan="3"><div class="tabs_hr"></div></td></tr>');
} document.write("</table>");
Show/Hide Function

Code:
function showHide(){
var answer = document.getElementById('answerDiv');
if(document.getElementById('answerDiv').style.display == 'none') {
answer.style.display = "block";
} else {
answer.style.display = "none";
} }