Javascript xmlhttprequest make ajax request work in the background without waiting

Question

I have the following Javascript code

sendBtn.onclick = ()=> {
  inputField.focus();
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "processes/chat.php", true);
  xhr.onload = ()=> {
    if(xhr.readyState === XMLHttpRequest.DONE) {
      if(xhr.status === 200) {
        inputField.value = "";
        $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
      }
    }
  }
  let formData = new FormData(form);
  xhr.send(formData);
}

And the following related code in chat.php (made minimal)

$stmt = $pdo->prepare("INSERT INTO messages(incoming_msg_id, outgoing_msg_id, msg)VALUES(:imsg, :omsg, :msg)");
$stmt-> bindValue(':imsg', $imsg);
$stmt-> bindValue(':omsg', sessionUser());
$stmt-> bindValue(':msg', encrypt($chatMsg, ENCRYPTION_KEY));
$stmt-> execute();

if($stmt){
  $sub = 'MAIL SUBJECT GOES HERE';
  $message = 'MAIL CONTENT GOES HERE';
  mailSender($sub, $message, "abc@gmail.com"); // SEND EMAIL (Uses PHPMailer)
}

As you can see I am inserting data in into the table and if inserted I am sending a mail to the relevant user. Everything is working fine. Mail is delivering perfectly too. The problem is the wait time. Until and unless the mail is successfully delivered, i.e., successful execution of mailSender() function above, I do not get response. Other ajax requests that are to be executed right after the given ajax request above are delayed. If I comment out the mailSender() function then everything works normally as required because the time taken to send the mail is nulled out. But while sending the email the ajax slows down waiting for the email to be sent and doesn't respond until the mail is sent / delivered.

Here is another ajax code that is related to the ajax code mentioned above. This code is responsible for "instantly" retrieving the data as soon as the data was inserted using the ajax code mentioned above. This code should work instantly but in the current scenario doesn't work unless the PHP code above successfully sends the mail, i.e., unless the mainSender() function has completed it's execution.

let takeDown = true;
setInterval(() => {
  var dataString = {incoming_id: incoming_id};
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "processes/get-chat.php", true);
  xhr.onload = ()=> {
    if(xhr.readyState === XMLHttpRequest.DONE) {
      if(xhr.status === 200) {
        let data = xhr.response;
        chatBox.innerHTML = data.html;
        document.getElementById('theStatus').innerHTML = data.status;
        document.getElementById('typing').innerHTML = data.typing;
        if(!chatBox.classList.contains("active") && takeDown === true) {
          takeDown = false;
          $('html,body').animate({scrollTop: document.body.scrollHeight}, "fast");
        }
      }
    }
  }
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.responseType = "json";
  xhr.send(JSON.stringify(dataString));
}, 500);

Therefore, as an expected result what I need here is that I want the above first ajax request which is responsible for inserting the data to process in the background and should not hinder or slow down the second ajax requests which is responsible to fetch the inserted data. Users should not be made to wait until the mail is sent to be able to receive the sent data. The retrieval response should be instant after the data is inserted. In short, the ajax should be sending mail in the background without having to make the user wait for the response.