Loop through each xml result and add in seperate DIVs

I'm trying to use jQuery and XML to create image thumbnails and captions. I'm able to get the xml data to the page, but how do I make the images and captions load in to separate DIVs?

$.ajax({
    type: "GET",
    url: "imgs/thumbs/xml/furniture.xml",
    dataType: "xml",
    success: function(xml){
        $(xml).find('designName').each(function(){
            var sTitle = $(this).find('Thumb').text();
            var sPublisher = $(this).find('Code').text();

            $("#gDesigns").append('<div class="tBody" id="' + sTitle + '"> <div class="bImg"> <img src="designs/thumbs/' + sTitle + '.jpg"> <div class="txt">' + sPublisher + '</div> </div> </div>')
        });
    },
    error: function() {
        alert("An error occurred.");
    }
});

My question is how do I add each xml result as below

<div class="tBody" id="??">
    <div class="bImg">
        <img src="designs/thumbs/??.jpg">
    </div>
    <div class="txt">
        Caption
    </div>
</div>