I am getting some data from database using jQuery and AJAX in bootstrap modal but when I am trying t-CodePudding

I am getting some data from database using AJAX and jQuery from database using while loop and displaying it in bootstrap modal. The data is displaying accurate but when I try to update the record on the bases of displayed records, it gives me the wrong reference id. I have checked my code many time but didn't fine any error. Following is my code, please check it and identify the error so I can get the correct value: -

html modal code:

<div class="modal fade" id="assign">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="bhead">
                    <div class="csr-details"></div>
                </div>
            </div>
        </div>
    </div>  
</div>

jQuery Code:

$(document).on("click", "#editId", function(){
    var parent_id = $(this).data("id");
    $.ajax({
        url: "newSignups.php",
        type: "POST",
        data: {parent_id: parent_id},
        success: function(data){
            jQuery.noConflict(); 
            $('#assign').modal('show');
            $('.csr-details').html(data); 
        }
    });
});

PHP code:

if(isset($_POST['parent_id']))
{
    $parent_id = $_POST['parent_id'];
    $query = mysqli_query($conn, "SELECT * FROM employee WHERE role = 'SuperAdmin' OR role = 'csr' ");
    while ($row = mysqli_fetch_assoc($query))
    {
        extract($row);
        $csr_id = $employee_id;
        echo $csr = "<a id='assign_csr'>
            <div class='modal-div'>
                <table width='100%'>
                    <tr>
                        <td><img src='../$employee_img' width='100' height='100' ></td>
                        <td><sub><sub>Assign To: <hr> </sub></sub> $employee_name <br> <sub><sub>$designation</sub></sub></td>
                        <input type='hidden' id='employeeId' value='$csr_id'>
                        <input type='hidden' id='parent' value='$parent_id'>
                    </tr>
                </table>
            </div>
        ";
    }
}

All this code is working fine but when I try to update the record in database, I only get the employee id of first employee which is 1 following is the jQuery code which I am trying get the employee id:

$(document).on("click","#assign_csr", function(){

        var parent_id = $("#parent").val();
        var employee = $("#employeeId").val();
        alert(employee);
    });

CodePudding user response：

don't use id to get the value try using class instead

PHP

 ......
 <input type='hidden' class='employeeId' value='$csr_id'>
 <input type='hidden' class='parent' value='$parent_id'>
 .......

jQuery

$(document).on("click","#assign_csr", function(){
  var parent_id = $(this).find(".parent").val();
  var employee = $(this).find(".employeeId").val();
});

Note :

$(this) is current element that trigered by onClick event so $(this).find(".parent") means find element with class "parent" inside trigerred element