how to insert dynamic data from a while loop using ajax in php

Question

I tried inserting the id of the looped users stored in the hidden field using ajax, based on the looped button a user clicks, but it's not working, please can any one help me out?

<!----Suggested users Start---->
                    <div class="ms_heading">
                        <h1>Suggested Users</h1>
                    </div>
                        <div class="swiper-wrapper">
                         <?php
                        require '../db.php';
                        $sql = "select * from users order by id desc";
                        //
                       $sql_query = mysqli_query($con,$sql);
                         while ($row = mysqli_fetch_array($sql_query)) {
                           $id = $row['id'];
                           $user_image = $row['profile_img'];
                           $myusername = $row['Username'];
                              ?>

                            <div class="swiper-slide">
                                <div class="ms_rcnt_box">

                         <div class="ms_pro_img">
                 <img src="User_Images/<?php echo $user_image;?>" alt="" class="img-fluid" id="pro_img"> 
                        </div>
                   <div class="ms_rcnt_box_text">       
    <center><b><a href=""><p><?php if(isset($myusername)){ echo $myusername;}?></p></a></b></center><br/>

                               <input type="hidden" value="<?php echo $id;?>" id="name">

                               <button type="submit" id="button">SAVE</button>

                        <script>
            $(document).ready(function(){
                $("#button").click(function(){
                    var name=$("#name").val();
                    $.ajax({
                        url:'insert.php',
                        method:'POST',
                        data:{
                            name:name,
                        },
                       success:function(data){
                           alert(data);
                       }
                    });
                });
            });
        </script>

                            <?
                             php
                              }
                            ?>
                        </div>

insert.php

<?php
require '../db.php';
$name=$_POST['name'];
$sql="INSERT INTO `myTest` (`id`, `name`) VALUES (NULL, '$name')";
if ($conn->query($sql) === TRUE) {
    echo "data inserted";
}
else 
{
    echo "failed";
}
?>

Answer 1

I have revised the full html and script code. Please find as follows:

 $(document).ready(function () { $("[id^=button_]").click(function () { var id = $(this).data('id'); var name = $("#name_"+id).val(); console.log(id+"---"+name); $.ajax({ url: 'insert.php', method: 'POST', data: { name: name, }, success: function (data) { alert(data); } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="ms_heading"><h1>Suggested Users</h1></div> <div class="swiper-wrapper"> <?php require 'db.php'; $sql = "select * from users order by iUserId desc"; $sql_query = mysqli_query($con,$sql); while ($row = mysqli_fetch_array($sql_query)) { $id = $row['iUserId']; $user_image = $row['vImage']; $myusername = $row['vFirstName']; ?> <div class="swiper-slide"> <div class="ms_rcnt_box"> <!-- <div class="ms_pro_img"> <img src="User_Images/<?php echo $user_image;?>" alt="" class="img-fluid" id="pro_img"> </div> --> <div class="ms_rcnt_box_text"> <center><b><a href=""><p><?php if(isset($myusername)){ echo $myusername;}?></p></a></b></center> <br /> <input type="hidden" value="<?php echo $id;?>" id="name_<?=$id;?>" name="name"> <button type="submit" id="button_<?=$id;?>" data-id="<?=$id;?>">SAVE</button> </div> </div> </div> <?php } ?>