Javascript loop not appending value in each container

you are trying to select a container before you append it to the details div. try appending the data values array to your container the following way:

var metaDataArray = resultSet.searchResult[i].metadatatoshow;

for (var xx = 0; xx < metaDataArray.length; xx++) {
    var metaDataContainer = $("<div id='itemMetaDataContainer_" + xx + "'>Meta Data:" + metaDataArray[xx].name + "-</div>");
    for (var xxx = 0; xxx < metaDataArray[xx].meta_values.length; xxx++) {
        metaDataContainer.append(metaDataArray[xx].meta_values[xxx]);
    }
    itemDetailsDiv.append(metaDataContainer);
}

UPDATE:

a jQuery object holds the plain html element in index [0] (assuming its not an array).
to get the html out of metaDataContainer you can find it in metaDataContainer[0]

therefore, in order to append the jQuery object metaDataContainer to the plain html element itemDetailsDiv, you need to do the following:

itemDetailsDiv.innerHtml + = metaDataContainer[0];

UPDATE 2:

Here is a plain JavaScript solution:

var metaDataArray = resultSet.searchResult[i].metadatatoshow;

for (var xx = 0; xx < metaDataArray.length; xx++) {
    //initializing the html string with the container opening tag and the description:
    var metaDataContainer = "<div id='itemMetaDataContainer_" + xx + "'>Meta Data:" + metaDataArray[xx].name;

    //looping through the values and adding them to the html string:
    for (var xxx = 0; xxx < metaDataArray[xx].meta_values.length; xxx++) {
        //create a span for each value and add it to the html string
        metaDataContainer+="<span>" + metaDataArray[xx].meta_values[xxx] + "</span>";
        //add a line break just for aesthetics, you can change to suit your formatting requirements
        metaDataContainer+="<br/>";
    }
    //finish by adding a closing tag for the container
    metaDataContainer+="-</div>"

    //append the new html string to the details div
    itemDetailsDiv.innerHtml +=metaDataContainer;
}