Ajax :: How To Build Menu Dynamically

I've got this XML file:
<?xml version="1.0" encoding="utf-8"?>
<Menu>
<Section>
<Title>Product Information</Title>
<Topic url="howto.html">How to use This Product</Topic>
<Topic url="product.html">Product Overview</Topic>
<Topic url="sysreq.html">System Requirements</Topic>
</Section>
.....
</Menu>

There's more data than that but for brevity that's the way it's constructed and repeats with several Titles and Topics. Here's the JS I'm using to build a dynamic menu. The goal is to pick up the data and build an Accordion menu out of it:
if (window.XMLHttpRequest) {
xhttp=new XMLHttpRequest(); //create ajax var
} else {
xhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE
} xhttp.open("GET","menu.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
document.write("<div class='acc'>");
var x=xmlDoc.getElementsByTagName("Section");
for (i=0;i<x.length;i++) {
document.write("<dt>");
document.write("<a href='#'>" + x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue + "</a></dt>");
document.write("<dd><ul>");
var y=xmlDoc.getElementsByTagName("Topic")[0].childNodes[0];
for (foo=0;foo<x.length;foo++){
document.write("<li class='acc_item'><a href='#'>" + x[i].getElementsByTagName("Topic")[0].childNodes[0].nodeValue + "</a></li>");
} document.write("</ul></dd>");
} document.write("</div>");

It creates the menu correctly... to a point. It has the correct styling, the accordion works perfectly, it has the correct Titles in the correct places, but when I "expand" one of the Titles it lists the first topic only, and lists it 5 times (the same amount of Titles I have). It then repeats this for every section. Example:
Product Information
How to Use This Product
How to Use This Product
How to Use This Product
How to Use This Product
How to Use This Product
I'm not very confident in the syntax, or what it is exactly doing.