Buscador ajax en tabla HTML dinámica

[inovaweb]

Buenos días foro,

tengo una tabla de Ingresos Html dinámica (se añaden filas nuevas mediante javascript) con la siguiente estructura de columnas:

Categoria (select)
Mensualidad (select)
concepto (input, al empezar a escribir deben aparecer los resultados en un desplegable)
unidades (input)
importe (input)
descuento (input)

Antes de la tabla tengo un buscador en ajax que funciona correctamente, al empezar a escribir en el input del buscador sale un desplegable con las busquedas encontradas, en el momento que hago click en uno de los resultados se carga la info en la primera linea de la tabla y se carga una nueva fila dinamicamente..

El problema viene cuando vuelvo a buscar y selecciono otro elemento del desplegable de busqueda, mi intencion seria que el contenido cargara en la segunda fila de la tabla pero en vez de eso carga en la primera fila de la tabla machacando el contenido previamente insertado.

Código HTML:

<tr id="fila">
                                                                <td>            
                                                                    <a class="toggle-link" onclick="eliminar_fila_recibos(this)">
                                                                        <i class="glyphicon glyphicon-minus"></i>
                                                                    </a>                                            
                                                                </td>
                                                                    
                                                                <td>                                            
                                                                    <?php echo $tipos_servicio_select; ?>
                                                                </td>
                                                                    
                                                                <td>
                                                                    <?php echo $mensualidades_select; ?>
                                                                </td>
                                                                
                                                                <td>
                                                                    <input type="text" id="concepto_ingreso" class="input" value="" style="width: 300px;"/>
                                                                    <!--<input type="text" id="concepto_recibos" class="input buscador_ingresos" value="" style="width: 300px;"/>-->
                                                                    <!--<div id="resultados_busqueda_servicio" class="resul_busq_servicio">
                                                                    
                                                                    </div>-->
                                                                </td>
                                                                
                                                                <td>    
                                                                    <input type="text" id="unidades_ingreso" class="input" value="0" style="width: 50px;"/>
                                                                </td>
                                                                
                                                                <td>                                            
                                                                    <input type="text" name="precio_ingreso" id="precio_ingreso" class="input precio_recibos" value="0" style="width: 50px;"/>
                                                                </td>
                                                                
                                                                <td>    
                                                                    <input type="text" id="descuento_ingreso" class="input" value="0" style="width: 50px;"/>
                                                                </td>
                                                                        
                                                            </tr>
 

Para añadir la fila a la tabla dinamicamente:

Código Javascript:

var select = recoge_select(); 
                        var select2 = recoge_select_mensualidades();
                        
                        $('#tabla_ingresos tr:last').after('<tr id="fila"><td><a class="toggle-link" onclick="eliminar_fila_recibos(this)"><i class="glyphicon glyphicon-minus"></i></a></td><td>'+select+'</td><td>'+select2+'</td><td><input type="text" id="concepto_ingreso" class="input buscador_ingresos" value="" style="width: 300px;"/><div id="resultados_busqueda_servicio" class="resul_busq_servicio"></div></td><td><input type="text" class="input" value="0" style="width: 50px;"/></td><td><input type="text" name="precio_ingreso" id="precio_ingreso" class="input precio_recibos" value="0" style="width: 50px;"/></td><td><input type="text" class="input" value="0" style="width: 50px;"/></td></tr>');
 

Para sobreescribir la fila de la tabla con lo datos de la seleccion del buscador

Código Javascript:

function selecciona_servicio(id_servicio_seleccionado)
            {
                $.ajax(
                {
                    type: 'POST',
                    url: '<?php echo base_url().'admin_controllers/ingresos_controllers/insertar_ingresos_controller/'.'seleccionar_servicio';?>',
                    data: {info: id_servicio_seleccionado},
                    success: function (data2) 
                    {       
                        
                        // Decodifica el array recibido(codificado en JSON) http://www.dyn-web.com/tutorials/php-js/json/array.php
                    
                        var valores2 = JSON.parse(data2);
                        
                        
                        document.getElementById("fila").lastChild.value=valores2.precio_servicio;
                        
                        
                        
                        var select = recoge_select(); 
                        var select2 = recoge_select_mensualidades();
                        
                        $('#tabla_ingresos tr:last').after('<tr id="fila"><td><a class="toggle-link" onclick="eliminar_fila_recibos(this)"><i class="glyphicon glyphicon-minus"></i></a></td><td>'+select+'</td><td>'+select2+'</td><td><input type="text" id="concepto_ingreso" class="input buscador_ingresos" value="" style="width: 300px;"/><div id="resultados_busqueda_servicio" class="resul_busq_servicio"></div></td><td><input type="text" class="input" value="0" style="width: 50px;"/></td><td><input type="text" name="precio_ingreso" id="precio_ingreso" class="input precio_recibos" value="0" style="width: 50px;"/></td><td><input type="text" class="input" value="0" style="width: 50px;"/></td></tr>');
        
                    }
                });
            }
 

Que formas habría para solucionar este problema?

Gracias de antemano.

[Alexis88]

Empieza por no asignar el mismo id a las filas puesto que debe de ser un valor único en todo el documento, además, veo que tomas a la fila por dicho identificador y si hay más de una fila con el mismo id, solo tomará a la primera de ellas.

Podrías usar una clase ya que sí puede repetirse y tomarías al último de ellos así:

Código Javascript:

$(".clase:last-child")
 

O así:

Código Javascript:

$(".clase").last()
 

Saludos