using promise pattern in a loop

using promise pattern in a loop

I need to loop thru div's and load them using the promise pattern but
apparently only the data from the last call gets displayed.
Here is my code
$('div[class=ceTable]').each(function () {
var position = $(this).position();
gridID = $(this).attr('id')
tableID = $(this).attr("data-tableid")
docId = $(this).attr("data-docid")
headerFound = $(this).data("headerFound")
headerArray = $(this).data("headerArray")
columnCount = $(this).data("columnCount")
$.ajax({
type: "GET",
dataType: "json",
url: "ajaxGetTableData",
data: {'docID': docId, 'tableID': tableID},
beforeSend: function () {
$('#' + gridID).block({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#36a9e1',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: 5,
color: '#fff'
}, message: 'Loading Grid'
});
}
}).done(function (data) {
console.log(data, "ajaxGetTableData")
ceFeature.generateGridFromJSONObject({tabledata:
data, columnCount: columnCount, gridID:
gridID, headerArray: headerArray, headerFound:
headerFound})
$('#' + gridID).unblock();
})