How to update Database with data from divs with same id - php

Question

I am trying to using Ajax to update the database to skip the standard submission and not refresh the page just update results (entries)
So, first I have a table with some data which is already saved into links table on my database
So here is my codes:
1st links.php:
<div id="links_list">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>Link</td>
<td>Posted By</td>
<td></td>
</tr>
</thead>
<tbody>
<?php
$rows = $db->query("SELECT * FROM `links` ");
$totalLinks = $rows->num_rows;
if($totalLinks == 0){
echo "<tr><td colspan='5'><div class='' style='font-size: 16px;color: #F44336;background: #fff;width: fit-content;margin-left: 4px;'><i class='fa fa-meh-o'></i> <b>Error :</b> No LINK Has Been Added Yet.</div></td></tr>";
} else {
while ($row = mysqli_fetch_assoc($rows)) {
?>
<tr>
<td id="links_row" valign="middle">
<input type="checkbox" id="selectr-link-<?php echo $row['link_id']; ?>" name="select_link[]" value="<?php echo $row['link_id']; ?>" style="float:left;margin-top:3px;">
<span style="float:left;width:25px;height:20px;margin: 0 3px;text-align:center;font-size: 20px;line-height: 22px;color: #009688;"><?php if($row['link_type'] == "Iframe"){ echo "<i class='fa fa-tv'></i>"; } elseif($row['link_type'] == "Direct"){ echo "<i class='fa fa-globe'></i>"; } ?></span>
<span class="spanInMobile" style="float:left;height:20px;margin-right:5px;"><?php echo $row['link_url']; ?></span>
</td>
<td valign="middle">
<?php echo $row['posted_by']; ?>
</td>
<td valign="middle" class="text-right">
<?php $id = $row['link_id']; $status = $row['link_status']; if($status == '0'){ ?>
<span title="Enable" class="disabled-entry" id="enable_link[]" data-id="<?php echo $row['link_id']; ?>"></span>
<?php } elseif($status == '1'){ ?>
<span title="Disable" class="enabled-entry" id="disable_link[]" data-id="<?php echo $row['link_id']; ?>"></span>
<?php } ?>
<script>
$(document).ready(function(){
$('#enable_link').CLICK(function(){
var link_id = $('#enable_link').attr('data-id');
$.ajax({
url: "../src/ajax/enable_link.php",
method: "post",
data: {link_id:link_id},
success: function(data){
$('#links_list').html(data);
}
});
});
});
});
</script>
<script>
$(document).ready(function(){
$('#disable_link').click(function(){
var link_id = $('#disable_link').attr('data-id');
$.ajax({
url: "../src/ajax/disable_link.php",
method: "post",
data: {link_id:link_id},
success: function(data){
$('#links_list').html(data);
}
});
});
});
</script>
</td>
</tr>
<?php } } ?>
</tbody>
</table>
</div>
** enable.php **
<?php
require_once ('../system/config.php');
$link_id = $_POST['link_id'];
$db->query("UPDATE `links` SET `link_status` = '1' WHERE `link_id` = '".$link_id."'");
?>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>Link</td>
<td>Posted By</td>
<td></td>
</tr>
</thead>
<tbody>
<?php
$rows = $db->query("SELECT * FROM `links` ");
$totalLinks = $rows->num_rows;
if($totalLinks == 0){
echo "<tr><td colspan='5'><div class='' style='font-size: 16px;color: #F44336;background: #fff;width: fit-content;margin-left: 4px;'><i class='fa fa-meh-o'></i> <b>Error :</b> No LINK Has Been Added Yet.</div></td></tr>";
} else {
while ($row = mysqli_fetch_assoc($rows)) {
?>
<tr>
<td id="links_row" valign="middle">
<input type="checkbox" id="selectr-link-<?php echo $row['link_id']; ?>" name="select_link[]" value="<?php echo $row['link_id']; ?>" style="float:left;margin-top:3px;">
<span style="float:left;width:25px;height:20px;margin: 0 3px;text-align:center;font-size: 20px;line-height: 22px;color: #009688;"><?php if($row['link_type'] == "Iframe"){ echo "<i class='fa fa-tv'></i>"; } elseif($row['link_type'] == "Direct"){ echo "<i class='fa fa-globe'></i>"; } ?></span>
<span class="spanInMobile" style="float:left;height:20px;margin-right:5px;"><?php echo $row['link_url']; ?></span>
</td>
<td valign="middle">
<?php echo $row['posted_by']; ?>
</td>
<td valign="middle" class="text-right">
<?php $id = $row['link_id']; $status = $row['link_status']; if($status == '0'){ ?>
<span title="Enable" class="disabled-entry" id="enable_link[]" data-id="<?php echo $row['link_id']; ?>"></span>
<?php } elseif($status == '1'){ ?>
<span title="Disable" class="enabled-entry" id="disable_link[]" data-id="<?php echo $row['link_id']; ?>"></span>
<?php } ?>
<script>
$(document).ready(function(){
$('#enable_link').click(function(){
var link_id = $('#enable_link').attr('data-id');
$.ajax({
url: "../src/ajax/enable_link.php",
method: "post",
data: {link_id:link_id},
success: function(data){
$('#links_list').html(data);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$('#disable_link').click(function(){
var link_id = $('#disable_link').attr('data-id');
$.ajax({
url: "../src/ajax/disable_link.php",
method: "post",
data: {link_id:link_id},
success: function(data){
$('#links_list').html(data);
}
});
});
});
</script>
</td>
</tr>
<?php } } ?>
</tbody>
</table>
It works only if the first row was been enabled and then the second one... ect but if you want to enable the 2nd row for example it won't work until you enable the first one
I tried with each() function but I am not sure that the code was right written

Answer 1

you can't use same ID for pointing multiple elements in DOM, instead use CLASS.
so change your click event binding to a class instead of ID
Example
$(document).ready(function(){
$('.enabled-entry').click(function(){
var link_id = $(this).attr('data-id');
$.ajax({
url: "../src/ajax/enable_link.php",
method: "post",
data: {link_id:link_id},
success: function(data){
$('#links_list').html(data);
}
});
});
});
Also add this script after while loop