Using Custom Javascript and pHp to send email to myself when a user clicks on an input button but only works on Chrome, IE, and Micorosft Edge

So I am using jQuery and pHp together to send an email to myself whenever a user clicks on the update button of their Ultimate Member form. However, the email only sends when a user is using Chrome, IE, and Microsoft Edge. When using Safari and Firefox, it doesn't work. I am using a click event listener to send JSON to my pHp file. The JSON was originally an object that was created by a function that checks for the differences between two different objects. These objects were created using DOM traversal. In that pHp file is a mail() function that sends me the aforementioned JSON to my email. I've tried replicating the process on a test site and noticed that when I didnt add the jQuery that comes before my click listener, emails do indeed get sent from Safari and Firefox. However, if I add the jQuery code and THEN remove it and test again it won't send! It's as if my server gets permanently rejected. Here is my JS code: (function($){

$(document).ready(function(){

console.log('mailajax is enqueued, showing on firefox');

var ogArray = new Array(),
    newArray = new Array(),
    dropOgArray = new Array(),
    dropNewArray = new Array(),
    difference,
    username = $('.um-name').find('a').attr('title');


function diffObject(a, b) {
  return Object.keys(a).reduce(function(map, k) {
    if (a[k] !== b[k]) map[k] = b[k];
    return map;
  }, {});
}

$('input.um-form-field').each(function() {

    var $key = $(this).closest('.um-field').find('label').text();
    var $value = $(this).val();

    ogArray[$key] = $value;

});

console.log(ogArray);

setTimeout(function(){

$('span.select2-chosen').each(function() {

    var $key = $(this).closest('.um-field').find('label').text();
    var $value = $(this).text();

    // console.log($value);

    dropOgArray[$key] = $value;

});

console.log(dropOgArray);

},1000);



$('input.um-form-field').on('keyup', function(){
    $('form').find('input.um-form-field').each(function() {

        var $key = $(this).closest('.um-field').find('label').text();
        var $value = $(this).val();

        newArray[$key] = $value;

    });

    console.log(newArray);

    console.log(diffObject(ogArray, newArray));

    difference = diffObject(ogArray, newArray);
});

$('select.um-form-field').on('change', function(){
    setTimeout(function(){
        $('form').find('span.select2-chosen').each(function() {

            var $key = $(this).closest('.um-field').find('label').text();
            var $value = $(this).text();

            dropNewArray[$key] = $value;

        });

        console.log(diffObject(dropOgArray, dropNewArray));

        dropDifference = diffObject(dropOgArray, dropNewArray);
    }, 1000);


});


$('.um-profile-body .um-button').on('click', function(e) {

    $('form').on('submit', function(){

        console.log('form was sent successfully');
        var ajaxurl = 'http://www.reformeducators.org/wp-content/themes/NATE/admin-ajax.php';
            stringDifference = JSON.stringify(difference);
            stringDropDifference = JSON.stringify(dropDifference);
            stringUsername = String(username);


        $.post(ajaxurl, {'Name': stringUsername, 'Changes Made': stringDifference, 'Drop Down Menu Changes': stringDropDifference});


    });


});


});

})(jQuery);

And here is my pHp code:

?php

$message = "User Information has been changed\r\n";
$message .= print_r($_POST, true);


$to = "[email protected]";
$subject = "User information has been changed!";
$headers = "From: ";

mail($to, $subject, $message, $headers); 




?

I think this might be a server issue, but if anyone has any experience doing something like this, I would really appreciate some feedback or help.