FormData no envia inputs ni valores de formulario

[webtexcoco]

hola ojala puedan orientarme un poco.

Tengo bucle while que obtiene registro de una BD (nombre y apellido)

Los muestro en una tabla con tres columnas nombre, apellido y botón de editar

En el botón de editar tengo un modal box que al momento de darle clic me abre un modal con el formulario con el nombre y apellido a editar

cada form tiene un id único por ejemplo form1, form2, etc... (el num es el id de cada registro) valor que obtengo por jquery para especificar que formulario se selecciono,

cuando quiero enviar los datos capturados la respuesta que obtengo por medio de ajax a través del archivo php que procesa todo es un array vació, ni siquiera se envían los nombre de los campos por post

a grandes rasgos este es mi código

pagina clientes.php

Código PHP:

while($c_t = mysqli_fetch_array($consulta_tabla)){
    echo "
        <tr align=\"center\" data-id=\"".$c_t['id']."\">
            <td>".$c_t['id']."</td>
            <td>".$c_t['nombre']."</td>
            <td>".$c_t['apellido']."</td>
            <td>";
            include 'form.php';
    echo "
                <a href=\"javascript:;\" class=\"edit-reg\" onclick=\"abrir_modal('caja".$c_t['id']."','boton".$c_t['id']."','close".$c_t['id']."','load".$c_t['id']."')\" id=\"boton".$c_t['id']."\">btn</a>
            </td>
        </tr>
    ";
}
 

form.php

Código PHP:

<!-- demás código modal -->
<form class=\"formulario\" id=\"envia".$c_t['id']."\" enctype=\"multipart/form-data\" method=\"post\" >
    <input type=\"text\" name=\"nombre\" id=\"nombre".$c_t['id']."\" placeholder=\"nombre...\">
    <input type=\"text\" name=\"apellido\" id=\"apellido".$c_t['id']."\" placeholder=\"apellido...\">
    <input type=\"file\" name=\"archivo\" id=\"archivo".$c_t['id']."\" required>
    <input type=\"submit\"><span id=\"load".$c_t['id']."\"></span>
</form>
<!-- demás código modal -->
 

ajax.js

Código Javascript:

$(document).ready(function(){
    $(document).on("click", ".edit-reg", function (){
 
        var element = $(this)[0].parentElement.parentElement;//con esta linea accedo al tr correspondiente
        var id = $(element).attr('data-id');//con esta linea accedo al valor del atributo data-id que es el id de cada registro
 
        var formulario = "#envia"+id;// obtengo el nombre del formulario elegido concatenando el id correspondiente
        //console .log(formulario); haciendo pruebas si obtengo el nombre del formulario
        $(formulario).submit(function(e){
 
            e.preventDefault();
            var datos = new FormData(formulario);
            $.ajax({
                url: 'insert.php',
                method: 'post',
                dataType: 'html',
                cache: false,
                data: datos,
                contentType: false,
                processData: false,
                success: function(res){
                    console.log(res);
                }
            });
 
        });
 
    });
});
 

insert.php
solor tengo un

Código PHP:

print(".print_r($_POST, true).");
 

pero la respuesta de el post es vació, ni los nombres de los campos se envían

que puede estar pasando?

cabe mencionar que hice pruebas con este mismo ejemplo pero sin meterlo en el array php (es decir con un solo form con un único id) y funciona se envían los datos

cualquier ayuda que me puedan dar se los agradeceré enormemente ya que ya me bloquee y no encuentro donde está mi fallo

[webtexcoco]

bueno ya consegui resolver, lo que me hacia falta era seleccionar el formulario con una nueva variable y esa variable pasarla al formData algo asi

Código Javascript:

var f = "envia"+id;
var formu = document.getElementById(f);
var datos = new FormData(formu);
 

el único detalle es que me enviar dos veces el array post, como si hubiera presionado dos veces seguidas el submit, alguien sabe a que se debe??

por ejemplo si hago un console.log de formu me aparece el formulario dos veces, adjunto imagen