jQuery Ajax多个XML文件

So here's what I'm trying to do:

I have a range of products each with its own xml file containing data about that product.

For each product I want to generate its info within a div that has an ID which is the same as the product ID within the xml link.

The html basically looks like this:

<div id="000001" class="product"></div>
<div id="000002" class="product"></div>
<div id="000003" class="product"></div>

And the xml files use this naming convention:

product/000001/output.xml
product/000002/output.xml
product/000003/output.xml

And the jquery I have so far is:

$(document).ready(function(){

$('.product').each(function(){

    var pId = $(this).attr('id')

    var getURL = "product/" + pId + "/output.xml"

    $.ajax({
        type: "GET",
        url: getURL,
        dataType: "xml",
        success: function(xml) {
            $(xml).find('productinfo').each(function(){

                var title = $(this).find('name').text();
                var url = $(this).find('buyLink href').text();
            });
        }
    });

});
});

I think i'm on the right lines but i'm not sure how to append the data from the xml files to the div, or if the code I have will get the data from the right xml file!

Any help or suggestions of a better way of doing this would be greatly appreciated.