JSFiddle - React, Tailwind, and code Playground

HTML

<h4>
See console
</h4>

JavaScript

let orders = [{
   id: 1,
   qty: 20
 }, {
   id: 2,
   qty: 35
 }, {
   id: 3,
   qty: 99
 }];

 postloop(orders).then(finalData => {
   console.log('Final', finalData);
 });

 function postloop(orders) {
   let finalData = [],
     orderIndex = 0;

   function completeRequests(res) {
     // push results of each set of requests to array
     finalData.push(res);
     orderIndex++;
     if (orderIndex < orders.length) {
       //  return another set of request promises 
       return doRequests(orders[orderIndex]).then(completeRequests)
     } else {
       // and finally return array of data to resolve all promises
       return finalData;
     }

   }
   // return promise chain
   return doRequests(orders[orderIndex]).then(completeRequests);

 }

 // function will be called recursively in postloop() always returning promise
 function doRequests(order) {
   let backorder = $.extend({}, order);
   backorder.note = "Backorder";

   // return request promises
   return firstRequest().then(secondRequest)


   function firstRequest() {
     return $.ajax({
       url: '/echo/json/',
       method: 'POST',
       data: {
         json: JSON.stringify(backorder)
       }
     }).then(backorderResponse => {
       console.log('First request complete for id: ', backorder.id)
       return backorderResponse;
     });
   }

   function secondRequest(backorderResponse) {
     let cancel = {
       id: backorderResponse.id, // do something with data from first response,
       qty: backorderResponse.qty,
       note: 'Cancel'
     };

     return $.ajax({
       url: '/echo/json/',
       method: 'POST',
       data: {
         json: JSON.stringify(cancel)
       }
     }).then(cancelOrderResponse => {
       let combinedData = {
         cancel: cancelOrderResponse,
         backorder: backorderResponse
       };
       console.log('Second request complete for id: ', cancel.id)
       return combinedData;
     });
   }
 }