too long

I'm facing major issue in changing status of a particular row in table with <select> tag .

I'm using jquery-Ajax so, here go functionality by this when is click on <select on any particular row for Example: Lets say i have changed the status of table row of id 2 from Pending to Delivered. On this jquery change() event triggers and it fetchs the value from 'tag' and sends the value to other file through ajax. Till here everything goes right the data goes through ajax and row with particular id's status is getting updated successfully.

But on Front end it does not change the status of the particular row. but it changes status of only first row .

Here i need it to change status of the particular row.

Note : I have searched in stackoverflow for this question. but those answere not come close to my question. Here are those links below Link 1 link2 link3

THANK YOU IN ADVANCE

Here is the Output and i have explained details in images also

There is the full code

HTML page : index.php

 <?php
    include('processing.php');
    $newobj = new processing();
?>
<html>
    <head>
        <title>Jquery Ajax select <tag> with PHP Mysql</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>Id</th>
                <th>Product name</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
            <?php echo $newobj->display();?>
        </table>
        <script>
            $(document).ready(function(){
                $(".selectstatus").change(function(){
                    var statusname = $(this).val();
                    var getid = $(this).attr("status-id");
                    //alert(displid);

                    $.ajax({
                        type:'POST',
                        url:'ajaxreceiver.php',
                        data:{statusname:statusname,getid:getid},
                        success:function(result){
                            $("#display").html(result);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

AJAX HANDLER PAGE : ajaxreceiver.php

    <?php
    include('processing.php');
    $newobj = new processing();

    if(isset($_POST['statusname'],$_POST['getid'])){
        $statusid = $_POST['statusname'];
        $id = $_POST['getid'];

        $newobj->getdata($statusid,$id);
    }
?>

PHP CLASSES FILE : processing.php

  <?php
    class processing{
        private $link;

        function __construct(){
            $this->link= new mysqli('localhost','root','','example');
            if(mysqli_connect_errno()){
                die ("connection failed".mysqli_connect_errno());
            }
        }

        function display(){
            $sql = $this->link->stmt_init();
            $id=1;
            if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){
                $sql->bind_result($id,$productname,$status);
                if($sql->execute()){
                    while($sql->fetch()){   
            ?>
                        <tr>
                            <td><?php echo $id;?></td>
                            <td><?php echo $productname;?></td>
                            <td><p id="display"><?php echo $status;?></p></td>
                            <td>
                                <select status-id=<?php echo $id;?> id="selectstatus" class="selectstatus">
                                    <option>Pending</option>
                                    <option>Delivered</option>
                                    <option>Cancelled</option>
                                    <option>Amount Paid</option>    
                                </select>
                            </td>
                        </tr>
            <?php   
                    }
                }
            }
        }

        function getdata($statusid,$id){
            $sql = $this->link->stmt_init();
            if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){
                $sql->bind_param('si',$statusid,$id);
                if($sql->execute()){
                    echo $statusid;
                }
                else
                {
                    echo "Update Failed";
                }
            }
        }
    }
?>

the problem is in this line :

$("#display").html(result);

so what's going here ?

you are creating display id for every row, which is not good practice to do , specially in your particular .

there are various solutions for this problem ,

("#display", $(this).parent().parent()).html(result);

here you are going to apply the action to particular ID which is belongs to the parent of the parent of the particular class which had received the change action

giving the display row unique id for each row

for example like follows :-

<td><p id="display_<?php echo $id; ?>"><?php echo $status;?></p></td>

and then apply your action to it directly ,

$("#display_" + getid).html(result);

and this solution is similar to the past one , by giving the parent <tr> a unique id

for example :-

<tr id='parent_<?php echo $id; ?>'>

and then apply your action it from your ajax like this

$("#display", $('#parent_' + getid)).html(result);

or even :

$('#parent_' + getid + ' #display').html(result);

Yes there is problem in $("#display").html(result); line because id ($("#display")) always select first element found in the DOM you can fix it by - following code-

<script>
  $(document).ready(function(){
            $(".selectstatus").change(function(){
                // make jquery object that make reference to select in which click event is clicked
                $this = $(this);
                var statusname = $(this).val();
                var getid = $(this).attr("status-id");
                //alert(displid);

                $.ajax({
                    type:'POST',
                    url:'ajaxreceiver.php',
                    data:{statusname:statusname,getid:getid},
                    success:function(result){
                        // this refer to the ajax callback function so we have to use $this which is initialized before ajax call
                        $($this).parents('tr').find("#display").html(result);
                    }
                });
            });
        });
    </script>