ajax code not work for 2nd list - php

Question

my code works fine for the first list. But not work even other list if has more list. Could you please find out what happened with my code.
if I click on signOut it will be add to database and remove form the page with signOut value only. First Div list work,But other will not response anything.
Thank You
Here is my code:
Java Script Code:
$(function() {
$("#add").click(function(){
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("dataid");
var outime = $(this).parents("#list").find("#outtime").val();
//Built a url to send
var info = 'id=' + del_id+ '&singout=' + outime;
$.ajax({
type: "POST",
url: "signOut.php",
data: info,
success: function(){
}
});
// After success
$(this).parents("#list").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
});
});
HTML COde:
<?php
$comments = runQuery($conn, "SELECT * FROM `civ_in_out` WHERE `out_time` = 'null'");
//print_r($comments) ;
if(!empty($comments)) {
foreach($comments as $k=>$v) {
?>
<div id="list">
<div class="form-group">
<div class="form-row">
<div class="col-md-3">
<input class="form-control" type="text" name="name" value="<?php echo $comments[$k]['name']; ?>" disabled>
</div>
<div class="col-md-3">
<input class="form-control" type="time" name="signIn" value="<?php echo $comments[$k]['in_time']; ?>" disabled>
</div>
<div class="col-md-3">
<input class="form-control" id="outtime" type="time" name="singOut">
<input class="form-control" id="id" type="hidden" name="id" value="<?php echo $comments[$k]['id']; ?>">
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-block" dataid="<?php echo $comments[$k]['id']; ?>" id="add" >Sign Out</a>
</div>
</div>
</div>
</div>
<?php
} }
?>
signOut.php
include 'connect.php';
$data=$_POST['serialize'];
echo $id = $data['id'];
echo $outtime = $data['singout'];
$sql = "UPDATE `civ_in_out` SET `out_time`='$outtime' WHERE id = '$id'";
mysqli_query($conn, $sql);

Answer 1

The problem is that you are repeating the list id and all the other element ids, so the jQuery call and event binding will always refer to the first id found on the HTML.
Id’s must be unique on you html.
You can change your code to use a class name for example:
$(function() {
$(".add").click(function(){
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("dataid");
var outime = $(this).parents(".list").find(".outtime").val();
//Built a url to send
var info = 'id=' + del_id+ '&singout=' + outime;
$.ajax({
type: "POST",
url: "signOut.php",
data: info,
success: function(){}
});
// After success
$(this).parents(".list").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");
});
});
HTML/PHP:
<?php
$comments = runQuery($conn, "SELECT * FROM `civ_in_out` WHERE `out_time` = 'null'");
//print_r($comments) ;
if(!empty($comments)) {
foreach($comments as $k=>$v) {
?>
<div class="list">
<div class="form-group">
<div class="form-row">
<div class="col-md-3">
<input class="form-control" type="text" name="name[]" value="<?php echo $comments[$k]['name']; ?>" disabled>
</div>
<div class="col-md-3">
<input class="form-control" type="time" name="signIn[]" value="<?php echo $comments[$k]['in_time']; ?>" disabled>
</div>
<div class="col-md-3">
<input class="form-control outtime" id="outtime-<?=$k?>" type="time" name="singOut[]">
<input class="form-control" id="id-<?=$k?>" type="hidden" name="id[]" value="<?php echo $comments[$k]['id']; ?>">
</div>
<div class="col-md-3">
<a class="btn btn-primary btn-block add" dataid="<?php echo $comments[$k]['id']; ?>>Sign Out</a>
</div>
</div>
</div>
</div>
<?php
} }
?>

Answer 2

You can change $("#add").click(function() to $(document).on('click', '#add', function()