AJAX only responds to the first row of php mysqli data. The other rows doesn't respond and retrieve data.

Question

Basically, this code gets info from id.php by studentid and returns address, document cost, etc The code is returned when the button student id is clicked but only for the first row. The second row does not return any data and i cant seem to figure out the problem. please help.

    <div id="briefinfo" style="display:inline-block;text-align:center;margin-left:20px;">

    <?php require_once("db.php");
        if ($result = $mysqli->query("SELECT * FROM requests WHERE status = 1 ORDER BY id"))
        {
            if ($result->num_rows > 0)
            {
                while ($row = $result->fetch_object())
                {   
                    echo "<div id='thumbnail'>";
                    echo " ". $row->lastname;
                    echo " ". $row->firstname;
                    echo "</div>";
                    echo "document id:" . $row->id;
                    echo "<br>";
                    echo "requested: " . $row->document;
                    echo "<br>";

                    if ($row->paidstatus == 1){
                        echo "payment status: paid";
                    }
                    else{
                        echo "payment status: not paid";
                    }
                    echo "<br>";
                    echo "<input type='button' value='$row->student_id' id='studentid'/>"; 
                    /*echo "<td>" . $row->document . "</td>";
                    echo "<td><a href='records.php?id=" . $row->id . "'>Edit</a></td>";
                    echo "<td><a href='delete.php?id=" . $row->id . "'>Delete</a></td>";
                    echo "<td><a href='unverify.php?id=" . $row->id . "'>unverify</a></td>";
                    echo "<td><a href='comments.php?id=" . $row->id . "'>comment</a></td>";
                    echo "<td>" . $row->paymentamount . " pesos";"</td>";
                    echo "<td><a href='paymentamount.php?id=" . $row->id . "'>set amount</a></td>";*/
                }
            }
            else
            {
                echo "No results to display!";
            }
        }
        else
        {
            echo "Error: " . $mysqli->error;
        } ?>

</div>

This is the JS

        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        //in your Javascript, put
        $(document).ready ( function () {
        $("#studentid").click (function(){
            var studentid = $(this).val();

            $.ajax({
            type: 'POST',
            url: 'id.php',
            data: {
                id: studentid
            },
            success: function(response) {
                $("#moredata").html(response);
            }
        });
        });
        });
    </script>

this id.php

    <?php
// connect to the database
include('connect-db.php');
// confirm that the 'id' variable has been set
require_once("db.php");

    $id = $_POST['id'];

    if ($result = $mysqli->query("SELECT * FROM requests WHERE student_id=$id"))
    {
            if ($result->num_rows > 0)
            {

                    while ($row = $result->fetch_object())
                    {
                        echo  $row->paymentamount . " pesos";
                        echo "<br>";
                        echo $row->address;
                        echo "<br>";
                        echo $row->address2;
                        echo "<br>";
                        echo $row->country;
                    }
            }
            else
            {
                echo "No results to display!";
            }
    }
    else
    {
            echo "Error: " . $mysqli->error;
    }
?>

First row of input button shows more data in when clicked the button. Second row does not display anything anymore. help

Answer 1

For following statement in while loop you should use class instead of id. You should not use same ID for multiple element.

echo "<input type='button' value='$row->student_id' class='studentid'/>"; 

And in your jquery script you should call it this way:

<script>
//in your Javascript, put
$(document).ready ( function () {
  $(".studentid").click (function(){
      var studentid = $(this).val();

      $.ajax({
        type: 'POST',
        url: 'id.php',
        data: {
            id: studentid
        },
        success: function(response) {
            $("#moredata").html(response);
        }
       });
  });
});
</script>