La causa del problema es bastante similar al de esta otra pregunta. Voy a poner aquí una versión reducida del código que tienes en JSFiddle:
$('#upload').on('click', function(){
// código y operaciones
// abrir modal
// más código y operaciones
confirm.on('click', function(){
// pedir confirmación
// serializar la tabla
// petición AJAX y cerrar modal
});
});
El botón con ID "upload" es el que se encarga de abrir el modal, y el botón con ID "confirm" es que realiza la petición AJAX y cierra el modal.
Como la asociación del controlador del evento click
del botón "Confirm" se realiza dentro del evento click
del botón "upload", eso quiere decir que se va a asociar un controlador al botón "confirm" cada vez que se pulse en el botón "upload".
Vamos a verlo paso a paso:
- Inicio de página, se asocia el controlador del evento
click
al botón "upload"
- El usuario pulsa en el botón "upload"
- Se abre el modal
- Se asocia un controlador del evento
click
al botón "Confirm" (lo llamaré Confirm1)
- El usuario hace lo que tenga que hacer y cierra el modal pulsando "confirm"
- Se lanza el controlador Confirm1 que realiza la llamada AJAX
- El usuario sigue trabajando y pulsa de nuevo el botón "upload"
- Se abre el modal
- Se asocia un controlador del evento
click
al botón "Confirm" (lo llamaré Confirm2)
- El usuario hace lo que tenga que hacer y cierra el modal pulsando "confirm"
- Se lanza el controlador Confirm1 que realiza la llamada AJAX
- Se lanza el controlador Confirm2 que realiza la llamada AJAX
- El usuario sigue trabajando y pulsa de nuevo el botón "upload"
- Se abre el modal
- Se asocia un controlador del evento
click
al botón "Confirm" (lo llamaré Confirm3)
- El usuario hace lo que tenga que hacer y cierra el modal pulsando "confirm"
- Se lanza el controlador Confirm1 que realiza la llamada AJAX
- Se lanza el controlador Confirm2 que realiza la llamada AJAX
- Se lanza el controlador Confirm3 que realiza la llamada AJAX
- ....
¿Ves lo que está ocurriendo? Cada vez que se pulsa en "upload" se asocia de nuevo el mismo controlador que realiza la llamada AJAX y por eso se acaban guardando los datos múltiples veces (tantas como veces se haya pulsado en "upload").
La solución: como el modal ya existe en la página y lo que se hace es mostrarlo/esconderlo, no necesitar asociar el controlador del click
para "confirmar" cada vez que se abra el modal, basta con que lo hagas una vez al principio de la página:
$('#upload').on('click', function(){
// código y operaciones
// abrir modal
// más código y operaciones
});
confirm.on('click', function(){
// pedir confirmación
// serializar la tabla
// petición AJAX y cerrar modal
});
Prueba con eso y dime cómo te va.
on('click')
, recorro la tabla y guardo los datos