Query single input ID - AJAX

Question

I am developing an application and in it, I have a method of searching customers by name, right at the beginning, I perform the collection of basic information of each client.

Follows the code:

function atualizaGrid(){

if ($("#filtrar").val())
    filtro = "/" + $("#filtrar").val();

$.ajax({
    type: "get",
    url: "https://rootURL/api/clientes/nome"+filtro,
   // dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (result, jqXHR) {

        var clientes = JSON.parse(result);
        $("#listaClientes").empty();
        $.each(clientes,function(i, cliente) {
           var row = "<div class='mdl-cell mdl-cell--12-col'><hr>"
          +"<input type='text' id='input_cliente' value="+cliente.id_cliente+" style='display:none'>"      
                  +"<ul class='demo-list-icon mdl-list'>"
           +"<button class='buttons' type='button' onclick='detalhesCliente()'>Mais detalhes</button>"
                  +"<li class='mdl-list__item'>"
                    +"<span class='mdl-list__item-primary-content'>"
                    +"<i class='material-icons mdl-list__item-icon'>person</i>"
                    +cliente.nome
                +"</span>"
                    +"</li>"
                +"<li class='mdl-list__item'>"
                        +"<span class='mdl-list__item-primary-content'>"
                            +"<i class='material-icons mdl-list__item-icon'>contact_phone</i>"
                            +cliente.telefone
                        +"</span>"
                +"</li>"

                +"<li class='mdl-list__item'>"
                    +"<span class='mdl-list__item-primary-content'>"
                        +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
                        +cliente.email
                    +"</span>"
                +"</li>"
                +"</ul>"
                +"</div>"
                            +"<div class='mdl-cell  mdl-cell--2-col-phone buttons' style='float:right;'>"

                                +"Excluir"

                                +"</div>"

                        +"<div class='mdl-cell  mdl-cell--2-col-phone buttons' style='float: left;'>"

                                +"Editar"

                                +"</div>"

            +"</div><p id='demo'></p><br><br>"

            $("#listaClientes").append(row);
        });
    },

});
}

The name search method is working, however, when clicking the "More details" button of each client, I want to be displayed complete information inherent to the requested customer. But if the first search returns more than one customer, I can’t get the other ID that is displayed.

My code only meets me if the search by name returns a single customer. For example, if the search returns two customers "Gabriel" I just get all the information on the first.

Detail function:

function detalhesCliente(){

if ($("#input_cliente").val())
    filtro = "/" + $("#input_cliente").val();


$.ajax({
    type: "get",
    url: "https://rootURL/api/clientes"+filtro,
   // dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (result, jqXHR) {

   var clientes = JSON.parse(result);
      $("#listaClientes").empty();
        $.each(clientes,function(i, cliente) {
           var row = "<div class='mdl-cell mdl-cell--12-col' style='text-align:center'>"
        +"<nav class='mdl-cell mdl-cell--12-col'>"
           +"<a title='show more'>Dados pessoais" 

           +"<button class='mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon'><i class='material-icons' style='color:#008b76'>list</i></button></a></nav>"
                  +"<ul class='demo-list-icon mdl-list' >"
                    +"<li id='id_cliente' style='display:none'>"
                    +cliente.id_cliente
                    +"</li>"

                  +"<li class='mdl-list__item'>"
           +"<b>Nome: </b>"
                    +"<span class='mdl-list__item-primary-content'>"
//                        +"<i class='material-icons mdl-list__item-icon'>person</i>"
                    +cliente.nome
                +"</span>"
                    +"</li>"
                +"<li class='mdl-list__item'>"
           +"<b>Telefone: </b>"
                        +"<span class='mdl-list__item-primary-content'>"
//                                +"<i class='material-icons mdl-list__item-icon'>contact_phone</i>"
                            +cliente.telefone
                        +"</span>"
                +"</li>"

                +"<li class='mdl-list__item'>"
           +"<b>Email: </b>"
                    +"<span class='mdl-list__item-primary-content'>"
//                            +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
                        +cliente.email
                    +"</span>"
                +"</li>"

                +"<div class='mdl-cell mdl-cell--12-col' style='text-align:center'><h6>Endereço<i class='material-icons' style='color:#fb4040'>location_on</i></h6><hr></div>"
                    +"<li class='mdl-list__item'>"
           +"<b>Rua: </b>"
                    +"<span class='mdl-list__item-primary-content'>"
//                            +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
                        +cliente.rua
                    +"</span>"
                +"</li>"

                    +"<li class='mdl-list__item'>"
           +"<b>Bairro: </b>"
                    +"<span class='mdl-list__item-primary-content'>"
//                            +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
                        +cliente.bairro
                    +"</span>"
                +"</li>"
           +"<li class='mdl-list__item'>"
           +"<b>Cidade°: </b>"
                    +"<span class='mdl-list__item-primary-content'>"
//                            +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
                        +cliente.cidade
                    +"</span>"
                +"</li>"
           +"<li class='mdl-list__item'>"
           +"<b>N°: </b>"
                    +"<span class='mdl-list__item-primary-content'>"
//                            +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
                        +cliente.numero
                    +"</span>"
                +"</li>"
           +"<li class='mdl-list__item'>"
           +"<b>Complemento: </b>"
                    +"<span class='mdl-list__item-primary-content'>"
//                            +"<i class='material-icons mdl-list__item-icon'>contact_mail</i>"
                        +cliente.complemento
                    +"</span>"
                +"</li>"
                +"</ul>"
                +"</div>"
                            +"<div class='mdl-cell  mdl-cell--2-col-phone buttons' style='float:right;'>"

                                +"Excluir"

                                +"</div>"

                        +"<div class='mdl-cell  mdl-cell--2-col-phone buttons' style='float: left;'>"

                                +"Editar"

                                +"</div>"

            +"</div><br><br>"

            $("#listaClientes").append(row);

        });
    },

});
}    

Answer 1

The code always shows the details of the first client pq the inputs of all clients have the same id, and the query "$("#input_client"). val()" will always return the first input.

You can fix this by passing the client id to the detail function:

       +"<button class='buttons' type='button' onclick='detalhesCliente(" + cliente.id_cliente + ")'>Mais detalhes</button>"

And in the function use this id in the filter:

function detalhesCliente(clienteId){
    var filtro = "/" + clienteId;