JavaScript Passing data from (html-JavaScript) table to JavaScript Function

[lexerpv]

Hi, I've got a button for adding rows (select option value and Input) to a html-JavaScript table, When I select an element from the select option value (idmedico) I use onchange option in the select for going to a JavaScript function for fetching the name for the idmedico and the populate the input (id="nombre_'+cont+'"). Because I can add several rows in html-JavaScript table then I will have: idmedico[0] -- id="nombre_0" idmedico[1] -- id="nombre_1"etc.
This is my JavaScript code for creating Table:

var fila='<tr class="filas" id="fila'+cont+'">'+
        '<td><button type="button" class="btn btn-danger" onclick="eliminarDetalle('+cont+')">X</button></td>'+
        '<td><select  name="idmedico[]" class="form-control idmedico" data-id="'+cont+'" onchange="myFunction(this.value)" required  ><option value="" >Seleccione Cuenta</option><?php echo seleccionar_medico($connect); ?></select></td>'+
        '<td><input type="text" id="nombre_'+cont+'" name="nombre[]" value=""></td>'+
        '</tr>';
        cont++;
        detalles++;
        $('#detalles').append(fila);

This is the JavaScript function (myFunction) for fetching name and then populate input with the name:

function myFunction(idmedico){
    var contador = document.getElementById('data-id');
        $.ajax({
            url: 'traer_nombre_medico.php',
            type: 'POST',
            dataType: 'json',
            data:{idmedico:idmedico},
            success: function(data)
            {
                              $('#nombre_'+contador).val(data.nombre);
            },
            error: function(errorThrown)
            {
                alert(errorThrown);
            }
            });
        }

The above function fetch the name for idmedico but doesn't populate the name in the input id="nombre_'+cont+'"
My problem is that I don't how to pass variable cont to myFunction():
The image show The table and how could works when selecting idmedico.

Please any ideas?

 

[cbreemer]

I don't see right away what is wrong here, but I find your code to create the fila string rather convoluted and error-prone.
Consider using the backtick operator, which has the advantage that you can create a multiline string with linefeeds and you can easily insert your counter like this : ${cont}

Thus the code would be

var fila = `
<tr class="filas" id="fila${cont}">
<td><button type="button" class="btn btn-danger" onclick="eliminarDetalle(${cont})">X</button></td>
<td><select  name="idmedico[]" class="form-control idmedico" data-id="${cont}"
    onchange="myFunction(this.value)" required  ><option value="" >Seleccione Cuenta</option><?php echo seleccionar_medico($connect); ?>
    </select></td>
<td><input type="text" id="nombre_${cont}" name="nombre[]" value=""></td>
</tr>
`;

While this might not solve your problem, it is at least easier to understand and maintain.

One thing I do not understand here is this name="nombre[]" Why do you want those square brackets in the name ? Is that even legal ?