Issue populating some fields dynamically using Javascript in Firefox

Question

Am working on a form whereby I populate the fields on the form dynamically from an API. The fields are being populated well in Google chrome and works well but fails in Firefox.. Seems the JS code am using to populate the fields is not working in Firefox

~ Please assist

Form Layout

<form 
   id="eazzycheckout-payment-form"
   action="https://api-test.*****************" method="POST">

   <input type="hidden" id="amount" name="amount" value="">
   <input type="hidden" id="orderReference" name="orderReference" value="">
   <input type="hidden" id="orderID" name="orderID" value="">

    <div class="card-body">
      <h5 class="card-title payment"><a href="#" id="mpesa" class="mpesa">Make Payment</a></h5>
    </div>

  <!--END-->
  </form>

AJAX code containing Response from the API whereby I populate the response to the form fields dynamically

//Fetch input fields via their id
    var amount = $('#amount');
    var orderID = $('#orderID');
    var  orderRef = $('#orderReference');

    $.ajax({
        type: 'POST',
        url: 'jengaAPI',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function(response){
            //console.log(response);
            //Fetch from response
            //Amount
            amount.val(response.amount);
            orderID.val(response.payment_reference);
            orderRef.val(response.payment_reference);

            //console.log(amount.val());
            //console.log(orderRef.val());

            $('#eazzycheckout-payment-form').submit();
        },
        failure: function(errMsg) {
             //alert('Pleas');
        }
    });