I have an html page which displays e-commerce orders. I select some of them with checkboxes, and create invoices using an ajax request to php server.

Now I want to create these invoices 3 by 3. So for example, if I have 4 invoices, I will make a ajax request 2 times, and show the process to user. Below is my code , I implemented async/await. However it is not working sync. I run below code for 4 invoices.

The output I expect should be in javascript console:

"Hello"
"Bye"
"Hello"
"Bye"

But it is printing to console:

"(2)Hello"
"(2)Bye"

What am I missing ? Here is the code:

  function processInvoices(){

  var arr_ordersToBeProcessed = [];

  let bulkCount = 3;
  let currCount = 0;
  let totalCount = jQuery("#div_orders").find('.invoiceCheckbox:checked').length;

  jQuery("#div_orders").find('.invoiceCheckbox').each(async function(i, obj) {

    let clickedOrder = $(obj).parent().parent().parent();

    if($(obj)[0].checked == true){

      let obj_singleOrder = {};

      obj_singleOrder.orderNumber = clickedOrder.find('.div_orderNumber').text();
      arr_ordersToBeProcessed.push(obj_singleOrder);

      currCount++;

      if(currCount%3==0 || currCount==totalCount){
          console.log("hello");
          const data = await jQuery.ajax({
                 type: "POST",
                 url: "./_production/createInvoices.php",
                 data: {
                   orders: JSON.stringify(arr_ordersToBeProcessed)
                 }
           });
          arr_ordersToBeProcessed = [];
          console.log("bye");

          if(currCount==totalCount){
            alert("Completed!"); return;
          }
      }
    }
  });
}