Java

<!doctype html>
<html>
<head>
    <title>How to autocomplete data on multiple fields with jQuery and AJAX</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href='jquery-ui.min.css' type='text/css' rel='stylesheet' >
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            $(document).on('keydown', '.username', function() {

                var id = this.id;
                var splitid = id.split('_');
                var index = splitid[1];

                $( '#'+id ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "getDetails.php",
                            type: 'post',
                            dataType: "json",
                            data: {
                                search: request.term,request:1
                            },
                            success: function( data ) {
                                response( data );
                            }
                        });
                    },
                    select: function (event, ui) {
                        $(this).val(ui.item.label); // display the selected text
                        var userid = ui.item.value; // selected id to input

                        // AJAX
                        $.ajax({
                            url: 'getDetails.php',
                            type: 'post',
                            data: {userid:userid,request:2},
                            dataType: 'json',
                            success:function(response){

                                var len = response.length;

                                if(len > 0){
                                    var id = response[0]['id'];
                                    var name = response[0]['name'];
                                    var email = response[0]['email'];
                                    var age = response[0]['age'];
                                    var salary = response[0]['salary'];

                                    document.getElementById('name_'+index).value = name;
                                    document.getElementById('age_'+index).value = age;
                                    document.getElementById('email_'+index).value = email;
                                    document.getElementById('salary_'+index).value = salary;

                                }

                            }
                        });

                        return false;
                    }
                });
            });


        });

    </script>
</head>
<body>
    <div class="container">

        <table border='1' style='border-collapse: collapse;'>
            <thead>
            <tr>
                <th>Username</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
                <th>Salary</th>
            </tr>
            </thead>

            <div class='tr_input'>
               <input type='text' class='username' id='username_1' placeholder='Enter username'>
                <input type='text' class='name' id='name_1' >
               <input type='text' class='age' id='age_1' >
               <input type='text' class='email' id='email_1' >
               <input type='text' class='salary' id='salary_1' >
            </div>

        </table>
        <br>
        <input type='button' value='Add more' id='addmore'>
    </div>
</body>
</html>