ajax append html 怎么写,jQuery ajax append html multiple times

I've currently encounter some problem, basically I create a few populateModal() functions to populate the modal container with respective html. It works fine for populateModal3 and populateModal4 (same function but with different url value).

ajax returns the data in json and it works perfectly fine in the other two populateModal function.

here's the snippet of the function

$.ajax({

url: "transaction/get_transaction",

dataType: 'json'

}).done(function(data){

$('#transModalContainerDel, #transModalContainerEdit').empty();

console.log(data);

for (var i = 0; i < data.length; i++)

{

console.log('id data: ' + data[i].id);

theDelTransModal += 'id modal: ' + data[i].id;

//theDelTransModal += '

';

//theDelTransModal += '

×

Delete transaction?

';

//theDelTransModal += '

Are you sure you want to delete this transaction? Note that you can\'t undo this action.

';

//theDelTransModal += '

Cancel Delete

';

//theDelTransModal += '

';

//$('#transModalContainerDel').append(theDelTransModal);

console.log(theDelTransModal);

}

});

as you can see from the above code, the returned data is in correct json format. but the id that I try to log return this value.

id data: 21

id modal: 21

id data: 22

id modal: 21id modal: 22

I'm not sure what went wrong as this function works perfect for the other url.

Thanks in advance