Ajax Not Working: How to set same ajax function for more than one text inputs on same page

Question

I have a page in which i have a table with n(Increasing Dynamically) number of rows, each row of table contains a input field, i want to execute ajax on keyup in input field of every row in table. Ajax is working for first row only on others it dose nothing.

PHP

<?php  $count=rowCount(); // UDF Returning no of rows
        for($i=1;$i<=10;$++){
?>
<tr>
    <td><input type="text" name="name" id="search" /></td>
</tr>
<?php 
}
?>

JS

$(document).ready(function(){
    $( "#search" ).focus();
    // Search Studnet Records.
    $("#search").keyup(function(){
        var name = $("#search").val();
        // alert('working');
        $.ajax({
            url:"fees_receipt_extra2.php",
            type:"POST",
            async:false,
            data:{
                "display": 1,
                "name":name
            },
            success:function(d){
                $("#show").html(d);
            }

        });
    });
});

fees_recipt_extra2.php

if (isset($_POST['display'])) 
{
    $name = mysqli_real_escape_string($conn,$_POST['name']);
        if($name)
        {
            $query = mysqli_query($conn,"SELECT * FROM students WHERE name  LIKE '%$name%' OR fathers_name  LIKE '%$name%' OR surname  LIKE '%$name%' OR id  LIKE '%$name%' LIMIT 10");
            if(mysqli_num_rows($query))
            {
                    echo"<table class='table table-hover tb1'>";
                        echo"<tr class='danger'>";
                            echo"<td >IMAGE</td>";
                            echo"<td >ID</td>";
                            echo"<td >DEPT</td>";
                            echo"<td >COURSE</td>";
                            echo"<td >NAME</td>";
                            echo"<td >F-NAME</td>";
                            echo"<td >SURNAME</td>";
                            echo"<td >Action</td>";
                        echo"</tr>";    
                while($data=mysqli_fetch_assoc($query))
                {           
                            $id=$data['id'];
                            $img=$data['image'];
                            if($id==find_id_in_feesreceipt_temp_table($id))
                            {
                                continue;
                            }
                        echo"<tr class='clickable-row' data-href='includes/fees_recepit_save_data_into_temp_table.php?std_id=$id'>";
                            echo"<td cellpadding='0'> <img src='Assests/profile_images/$img' width='50'></td>";
                            echo"<td >". $data['id']            ."</td>";
                            echo"<td >". $data['dept']          ."</td>";
                            echo"<td >". $data['course']        ."</td>";
                            echo"<td >". $data['name']          ."</td>";
                            echo"<td >". $data['fathers_name']  ."</td>";
                            echo"<td >". $data['surname']       ."</td>";
                            echo"<td ><a href='includes/fees_recepit_save_data_into_temp_table.php?std_id=$id' class='btn btn-primary btn-xs'>Append</a> </td>";
                        echo"</tr>";
                }
                    echo"</table>";

Answer 1

Instead of ID-s, use classes. ID is unique and can be used only for one input, while classes serve multiple tags.

<td><input type="text" name="name" class="searchable-input" value="<?php echo $data['full_name'] ?>" id="search"></td>

And in jQuery assign the ajax function to this class.

$(".searchable-input").keyup(function(){ 
     //ajax function here
});

Hope this is what you asked for. In other case, reply to my comment with more explanations.

Answer 2

Instead var name = $('#search').val() should be $(this).val() . And you should always try and delegate, that way if you have dynamic content can also be executed by the script.

$("td").on('keyup', '#search', function(){});

Answer 3

First of all, avoid assigning the same ID to multiple elements. Same goes for the name attribute as well. Assign class instead of IDs in your case, if required. However, you can bind keyup event like this (assuming table has a ID, using 'tableid' for instance)

$(document).ready(function(){
    $("table#tableid td>input:first-child").focus();
    // Search Student Records.
    $('table#tableid td>input[type="text"]').on("keyup", function(){
        var name = $(this).val();
        // alert('working');
        $.ajax({
            url:"fees_receipt_extra2.php",
            type:"POST",
            async:false,
            data:{
                "display": 1,
                "name":name
            },
            success:function(d){
                d = d.trim();
                $("#show").html(d);
            }
        });
    });
});

This shall bind the keyup and further AJAX events to each input in your table rows.