Array with HTML and Jquery

Question

I have a form, where the fields correspond to the amount registered in the database. I am bringing as follows:

<?php
....
$contar = $metodos->contarCadastro($chave);
$num = 1;
for($c = 1; $c <= $contarPaxes; $c++){
?>
    <div align='left'><label>Nome Completo:</label> <input type='text' name='NomeCompleto[]' id='nome' class='form-control' maxlenght='100'></div>
                <div align='left'><label>E-mail:</label> <input type='text' name='Email[]' id='email' class='form-control' maxlenght='100'></div>
                <div align='left'><label>Data de Nascimento:</label> <input type='text' name='DataNascimento[]' id="date" class='form-control' maxlenght='100'></div>
                <div align='left'><label>CPF:</label> <input type='text' id="cpf" name='CPF[]' class='form-control' maxlenght='100'></div>
<?php } ?>

And the jquery:

$("#btnCadastrar").on("click", function() {
  var nome = $("#nome").val();
  var email = $("#email").val();
  var data = $("#date").val();
var cpf =  $("#cpf").val();

  $.post("cadastrar.php", {Nome: nome, Email: email, data: data, CPF: cpf }, function() { 
  $(document).ready(function () {
    $('#myModa3').modal();
  });
});
});

But if you have to register 03 people, it only registers one. How do I so that in the case of array, register by jquery?

Answer 1

Remember that ID is unique per element.

Quick and easy suggestion:

Create a <form> with any ID and put these inputs inside this <form>.

After that, in your JS function do the following:

$("#btnCadastrar").on("click", function() {
    var formElements = $("#idDoSeuForm").serialize();


  $.post("cadastrar.php?"+formElements, function() { 
  $(document).ready(function () {
    $('#myModa3').modal();
  });
});
});

of course you turn into JSON before sending.