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

[lexer]

Hi, I've got a button for adding fields (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 then populate the input (id="nombre_'+cont+'"). Because I can add several rows in html-JavaScript table I will have: idmedico[0] -- id="nombre_0" idmedico[1] -- id="nombre_1"etc.
This is my JavaScript code for creating Table and fields:

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 fetch 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 should work when selecting idmedico.

Please any ideas?