Rewriting a small piece of code - Synchronous AJAX to proper Asynchronous AJAX

Looking to rewrite the following code in a proper way, using promises instead of "async: false"

The code will retrieve and output data data in this way:
Document No
- Item Code
-- Batch No

User can select multiple documents, a document has N number of items, and each item can have N number of Batch No. (or none), like so:

Document No
- Item Code
-- Batch No
- Item Code
-- Batch No
-- Batch No

Document No
- Item Code
- Item Code
-- Batch No
-- Batch No
- Item Code
-- Batch No

Original working code:
```
$.each(selected, function(key,value){
$("#consign_item_body").append("<tr><td>Document No : "+value+"</td></tr>");
$.ajax({
url: "php/get_docitem.php",
data: { docno: value},
dataType: "JSON",
async: false,
success: function(item) {
$("#consign_item_body").append("<tr><td>"+item[k]['few_details_here']+"</td></tr>"); $.ajax({
url: "php/get_itembatch.php",
data: { itemdoc:value,itemseq:item[k]['SEQ'],itemcode:item[k]['PRODCODE']},
dataType: "JSON",
async: false,
success: function(batch) {
$.each(batch,function(a){
$("#consign_item_body").append("<tr><td>"+batch[a]['few_details_here']+"</td></tr>");
});
}
});
});
}
});
});
```