Submitted data is not showing in the page processor

Question

I have an url that post data to another page (page_processor.php)

The content of page_processor.php is:

<?php
var_dump($_REQUEST($email));
?>

When I run my code, it doesn't show any data.

I tried print_r("$_REQUEST(email)",true); but have the same result.

I also tried:

<?php
var_dump($_REQUEST($email[]));
?>

Again not data is being captured.

The posted url is: https://www.example.com/submit-form-page/?email=email1%40test.com&email=email2%40test.com

The form is:

<form id="test_form" action="https://www.example.com/submit-form-page/">
      <div class="col-sm-12 col-md-12 col-lg-12">
        <div id="input_wrapper"></div>
        <button id="save_btn" class="btn btn-success">Save</button>
        <button id="add_btn" class="btn btn-primary">Add Email</button>
      </div>
</form>

And there is a jQuery script to handle the form:

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
    var x = 0;
    $('#save_btn').hide();
  
    $('#add_btn').click(function(e) {
    e.preventDefault();
    appendRow(); // append new element to form 
    x++; // increment counter for form
    $('#save_btn').show(); // show save button for form
  });

    $('#input_wrapper').on('click', '.deleteBtn', function(e) {
    e.preventDefault();
    var id = e.currentTarget.id; // set the id based on the event 'e'
    $('div[id='+id+']').remove(); //find div based on id and remove
    x--; // decrement the counter for form.
    
    if (x === 0) { 
        $('#save_btn').hide(); // hides the save button if counter is equal to zero
    }
  });
    
  $('#save_btn').click(function(e) {
    e.preventDefault();
    var formData = $('#test_form').serializeObject(); // serialize the form
    var obj; //obj can be use to send to ajax call
    if(Array.isArray(formData.email)) {
        for(var i = 0; i < formData.email.length; i++) {
        obj = {};
        // set the obj for submission
        obj.email= formData.email[i];
        // This object could be push into an array
        console.log('object from form array ', obj);
        $('form#test_form').submit();
      };
    } else {
        obj = {};
      obj.email = formData.email;
      console.log('single obj from form ', obj);
    }
    $('form#test_form').submit();
  });
  
  function appendRow() {
    $('#input_wrapper').append(
        '<div id="'+x+'" class="form-group" style="display:flex;">' +
          '<div>' +
            '<input type="text" id="'+x+'" class="form-control" name="email"                                    placeholder="Add Email"/>' +
          '</div>' +
          
          '<div>'+
            '<button id="'+x+'" class="btn btn-danger deleteBtn"><i class="glyphicon glyphicon-trash"></i></button>' +
          '</div>' +
        '</div>');
  }
});

$.fn.serializeObject = function(asString) {
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {

       if($('#' + this.name).hasClass('date')) {
           this.value = new Date(this.value).setHours(12);
       }

       if (o[this.name] !== undefined) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   if (asString) {
       return JSON.stringify(o);
   }
   return o;
};
</script>

What I am trying to do is to create a form in PHP then post it's data to another php page.

The jQuery function is to create multiple textboxes dynamically then submit the data to the processor page.

I tried everything and can't figure out what is wrong.

Edit: I moved

$('form#test_form').submit();

outside the loop.

What is wrong?

Thank you