Failing to send email using REST api

I have a requirement to send email via code by looping through an array of emails and send emails to every email in the array. I have written the code below. It only sends an email to the first email in the array and ignores the subsequent ones. However, if place alerts inside the code all the recipients will get the email. How can I fix this code and make sure all the emails in the array will get the email please?

function SendEmail()
{
   //  alert('Send Email is called');
     var subject = document.getElementById('email_subject_div').innerHTML;
      var body = document.getElementById('email_body_div').innerHTML; 
     var from ="sharepointnoreply@gmail.com";
     var to; 
     var siteurl = _spPageContextInfo.webServerRelativeUrl;
    var urlTemplate = siteurl + "/_api/SP.Utilities.Utility.SendEmail";
    for (i=0; i < ArraySelectedRoles.length; i++)
       {
         
         // alert(ArraySelectedRoles[i].UserEmail);
          to = ArraySelectedRoles[i].UserEmail;
          $.ajax({
        async: false,   
        contentType: 'application/json',
        url: urlTemplate,
        type: "POST",
        data: JSON.stringify({
            'properties': {
                '__metadata': {
                    'type': 'SP.Utilities.EmailProperties'
                },
                'From': from,
                'To': {
                    'results': [to]
                },
                'Body': body,
                'Subject': subject
            }
        }),
        headers: {
            "Accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
        },
     success: function(data) {
            alert('Email Sent Successfully');
             SP.UI.ModalDialog.commonModalDialogClose(1, 1); 
        },
        error: function(err) {
            alert('Error in sending Email: ' + JSON.stringify(err));
        }
    });
       }
}

 

---

faye fouladi