Tengo un problema, no sé si les ha pasado anteriormente, tengo esta función que se llama *"AgregarProducto"* que mediante un *append* agrega ciertos campos de una base de datos, entre ellos unos SELECT que son llenados mediante AJAX, y me permiten elegir los datos, mi problema es que cuando agrego un producto (ítem o línea adicional), los SELECT anteriores también reciben un *append*, lo que los hace cada vez más grandes según voy agregando y sus procesos que se ejecutan en el evento *change* en los nuevos, también me afectan a los anteriores. ¿De qué manera puedo crearlos de forma tal, que sean independientes entre sí y no me suceda ese comportamiento? /*============================================= AGREGANDO PRODUCTOS DESDE LA TABLA =============================================*/ $('.tablaInvFacturas tbody').on( 'click', 'button.btnAgregarProducto', function () { var idProducto=$(this).attr("idProducto"); //console.log("idProducto",idProducto); $(this).removeClass("btn-primary btnAgregarProducto"); $(this).addClass("btn-default"); var datos=new FormData(); datos.append("idProducto",idProducto); $.ajax({ url:"ajax/inventarios.ajax.php", method:"POST", data: datos, cache: false, contentType: false, processData: false, dataType: 'json', success: function(respuesta){ //console.log("respuesta",respuesta); var desc_prod =(respuesta["DESC_PROD"]); var exist =(respuesta["EXIST"]); var servicio =(respuesta["SERVICIO"]); //var precio =(respuesta["PRECIO"]); if(respuesta["SERVICIO"]==1){ $(".nuevoProducto").append( '<!--Descripción del Producto-->'+ '<div class="row" style="padding: 5px 5px">'+ '<div class="col-xs-5" >'+ '<div class="input-group">'+ '<span class="input-group-addon">'+ '<button type="button" class="btn btn-danger btn-xs btnQuitarProducto" idProducto="'+idProducto+'"><i class="fa fa-times"></i></button>'+ '</span>'+ '<input type="text" class="form-control" id="agregarProducto" name="agregarProducto" value="'+desc_prod+'" readonly required>'+ '</div>'+ '</div>'+ '<!--Cantidad del Producto-->'+ '<div class="col-xs-3">'+ '<input type="number" step="1" class="form-control nuevaCantidadProducto" name="nuevaCantidadProducto" exist="'+exist+'" servicio="'+servicio+'" min="1" required >'+ '</div>'+ '<!--Precio del Producto-->'+ '<div class="col-xs-4 ingresoPrecio">'+ '<div class="input-group">'+ '<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>'+ '<input type="number" step="0.01" class="form-control nuevoPrecioProducto" precioReal="" name="nuevoPrecioProducto" min="1" value="" required>'+ '</div>'+ '</div>'+ '<div class="row" style="padding: 5px 15px">'+ '<!--Nombre del médico practicante-->'+ '<div class="col-xs-3" >'+ '<div class="input-group">'+ '<select class="form-control nuevoMdPracticante" idProducto name="nuevoMdPracticante" id="nuevoMdPracticante" required>'+ '<option>Md. practicante</option>'+ '</select>'+ '</div>'+ '</div>'+ '<!--Nombre del médico referente-->'+ '<div class="col-xs-3">'+ '<div class="input-group">'+ '<select class="form-control nuevoMdReferente" idProducto name="nuevoMdReferente" id="nuevoMdReferente" required>'+ '<option>Md. referente</option>'+ '</select>'+ '</div>'+ '</div>'+ '<!--Nombre del paciente-->'+ '<div class="col-xs-4">'+ '<div class="input-group">'+ '<select class="form-control baseExpediente" idMd name="baseExpediente" required>'+ '<option>Base Expediente</option>'+ '<option value="pacientes">Base Dr. 1</option>'+ '<option value="pacientesf">Base Dr. 2</option>'+ '<option value="pacientess">Base Dr. 3</option>'+ '</select>' + '</div>'+ '<div class="input-group">'+ '<select class="form-control nuevoPacienteProcedimiento" idProducto name="nuevoPacienteProcedimiento" required>'+ '<option>Paciente</option>'+ '</select>'+ '</div>'+ '</div>'+ '</div>'+ '</div>' ); medicosFact(); /*SUMAR TOTAL DE PRECIOS*/ sumarTotalPrecios(); }else{ $(".nuevoProducto").append( '<!--Descripción del Producto-->'+ '<div class="row" style="padding: 5px 15px">'+ '<div class="col-xs-5" style="padding-right: 0px">'+ '<div class="input-group">'+ '<span class="input-group-addon">'+ '<button type="button" class="btn btn-danger btn-xs btnQuitarProducto" idProducto="'+idProducto+'"><i class="fa fa-times"></i></button>'+ '</span>'+ '<input type="text" class="form-control" id="agregarProducto" name="agregarProducto" value="'+desc_prod+'" readonly required>'+ '</div>'+ '</div>'+ '<!--Cantidad del Producto-->'+ '<div class="col-xs-3">'+ '<input type="number" step="1" class="form-control nuevaCantidadProducto" name="nuevaCantidadProducto" exist="'+exist+'" servicio="'+servicio+'" min="1" required >'+ '</div>'+ '<!--Precio del Producto-->'+ '<div class="col-xs-4 ingresoPrecio">'+ '<div class="input-group">'+ '<span class="input-group-addon"><i class="ion ion-social-usd"></i></span>'+ '<input type="number" step="0.01" class="form-control nuevoPrecioProducto" precioReal="" name="nuevoPrecioProducto" min="1" value="" required>'+ '</div>'+ '</div>'+ '</div>' ); /*SUMAR TOTAL DE PRECIOS*/ sumarTotalPrecios(); } } }); limpiarSelect("#nuevoMdPracticante"); limpiarSelect("#nuevoMdReferente"); }); Mi función *limpiarSelect* es la siguiente: function limpiarSelect(id) { document.getElementById(id).options.length = 0; } Y el HTML usado es este: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> Crear Factura </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-home"></i> Inicio</a></li> <li class="active"><a href="crearfactura">Crear Factura</a></li> </ol> </section> <!-- Main content --> <section class="content"> <div class="row"> <!--FORMULARIO FACTURA--> <div class="container-fluid"> <div class="box box-success"> <div class="box-header with-border"></div> <form role="form" method="post" class="formularioFactura"> <div class="box-body"> <div class="box"> <!--ENTRADA DEL USUARIO QUE GENERA LA VENTA--> <div class="form-group col-lg-4" style="padding: 2px"> <p class="help-block"><b>Usuario</b></p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input type="text" class="form-control" id="nom_usuario" name="nom_usuario" value="<?php echo $_SESSION["NOM_USUARIO"]?>" readonly> <input type="hidden" name="id_usuario" value="<?php echo $_SESSION["ID_USUARIO"]?>"> </div> </div> <!--FECHA DE EMISIÓN DEL DOCUMENTO--> <div class="form-group col-lg-2" style="padding: 2px"> <p class="help-block"><b>Fecha de emisión</b></p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="date" class="form-control" id="fecha_factura" name="fecha_factura" required> </div> </div> <!--CONDICIÓN DE PAGO--> <div class="form-group col-lg-4" style="padding: 2px"> <p class="help-block"><b>Condición</b></p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-list-alt"></i></span> <select class="form-control" name="idCondicion" id="idCondicion" required> <option value="">--Condición de Pago--</option> <?php $item=NULL; $valor=NULL; $condpago= ControladorCondPago::mostrarCondPago($item,$valor); foreach ($condpago as $key => $value) { echo '<option diasPago="'.$value["DIAS_PAGO"].'" value="'.$value["ID_COND"].'">'.$value["DESC_COND"].'</option>'; } ?> </select> </div> <!--FECHA DE VENCIMIENTO DE LA FACTURA--> </div> <div class="form-group col-lg-2" style="padding: 2px"> <p class="help-block"><b>Fecha de vencimiento</b></p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input type="date" class="form-control" id="fecha_venc" name="fecha_venc" readonly required> </div> </div> <!--ENTRADA PARA EL TIPO DE FACTURA--> <div class="form-group col-lg-3"> <p class="help-block"><b>Tipo de Factura</b></p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-list"></i></span> <select class="form-control" name="tipoFactura" id="tipoFactura"> <option value="">--Seleccione Tipo de Factura--</option> <?php $item=NULL; $valor=NULL; $tipofact= ControladorTipoFact::mostrarTipoFact($item, $valor); foreach ($tipofact as $key => $value) { echo '<option value="'.$value["ID_TIPO"].'">'.$value["DESC_TIPO"].'</option>'; } ?> </select> </div> </div> <!--ELEGIR LA SERIE FISCAL--> <div class="form-group col-lg-2"> <p class="help-block"><b>Serie Fiscal</b></p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-list"></i></span> <select class="form-control serieFactura" name="serieFactura" id="serieFactura"> <option value="">--Seleccione Serie Fiscal--</option> </select> </div> </div> <!--MOSTRAR EL NÚMERO DE FACTURA A IMPRIMIR--> <div class="form-group col-lg-2"> <p class="help-block"><b>Número de Factura</b></p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key"></i></span> <input type="number" class="form-control" id="nuevaFact" name="nuevaFact" readonly required> </div> </div> <!--ENTRADA PARA EL EL CLIENTE--> <div class="form-group col-lg-5"> <p class="help-block"><b>Nombre del cliente</b></p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-users"></i></span> <select class="form-control" id="seleccionarCliente" name="seleccionarCliente" required> <option value="">--Seleccionar Cliente--</option> <?php $itemcli=NULL; $valorclie=NULL; $clientes= ControladorClientes::mostrarClientes($itemcli, $valorcli); foreach ($clientes as $key => $value) { echo '<option value="'.$value["ID_CLIENTE"].'">'.$value["ID_CLIENTE"].' - '.$value["NOM_CLIENTE"].'</option>'; } ?> </select> <span class="input-group-addon"> <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#modalAgregarCliente" data-dismiss="modal">Agregar Cliente</button> </span> </div> </div> <!--BOTÓN PARA AGREGAR PRODUCTO--> <button type="button" class="btn btn-primary btnAgregarItem col-lg-3">Agregar Item</button> <hr> <!--ENCABEZADO DE TABLA PARA AGREGAR ITEMS--> <div> <table class="table table-striped"> <thead> <tr> <th>Cantidad</th> <th>Código</th> <th>Descripción</th> <th>Impuesto</th> <th>Lista de Precio</th> <th>Precio Unitario</th> <th>Sub-total</th> <th>Acción</th> </tr> </thead> <tbody class="nuevoProducto"> <!--ENTRADA PARA AGREGAR PRODUCTO--> <!-- <div class="form-group row nuevoProducto"> </div>--> </tbody> </table> </div> <div class="row"> <!--ENTRADA DE IMPUESTOS Y TOTAL--> <div class="col-xs-8 pull-right"> <table class="table"> <thead> <tr> <th>Impuesto</th> <th>Recargo</th> </tr> </thead> <tbody> <tr> <td style="width: 50%"> <div class="input-group"> <input type="number" class="form-control input-lg" id="nuevoImpuestoVenta" name="nuevoImpuestoVenta" readonly required> <span class="input-group-addon"><i class="fa fa-percent"></i></span> </div> </td> <td style="width: 50%"> <div class="input-group"> <span class="input-group-addon"><i class="ion ion-social-usd"></i></span> <input type="number" value="0.00" class="form-control input-lg" id="nuevoRecargoTc" name="nuevoRecargoTc" readonly required> </div> <p class="help-block"><b>TOTAL</b></p> <div class="input-group"> <span class="input-group-addon"><i class="ion ion-social-usd"></i></span> <input type="number" value="0.00" class="form-control input-lg" id="nuevoTotalVenta" name="nuevoTotalVenta" readonly required> </div> </td> </tr> </tbody> </table> </div> </div> <hr> <!--ENTRADA MÉTODO DE PAGO--> <div class="form-group row"> <div class="col-xs-6" style="padding-right: 0px"> <div class="input-group"> <select class="form-control" id="nuevoMetodoPago" name="nuevoMetodoPago" required> <option value="">Seleccione Forma de Pago</option> <?php $item=NULL; $valor=NULL; $formaspago= ControladorFormPago::mostrarFormPago($item, $valor); foreach ($formaspago as $key => $value) { echo '<option numAutorización="'.$value["AUTORIZACION"].'" recargoFormPago="'.$value["RECARGO_FORMPAGO"].'" value="'.$value["ID_FORMPAGO"].'">'.$value["DESC_FORMPAGO"].'</option>'; } ?> </select> </div> </div> <div class="cajasMetodoPago"></div> <br> </div> </div> <div class="box-footer"> <button type="submit" class="btn btn-primary pull-right">Guardar Factura</button> </div> </div> </form> </div> </div> </div> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> <!-- end snippet -->