Only the top most switch works in my website - php

Question

I'm using HTML, PHP and Ajax to toggle switch in my website. However, only the top most switch is functional. The reason why I use PHP is to display results from my DB, and Ajax is there to toggle switch without reloading the website. Thanks in advance and comment for any questions!
Photo Here :D I have three rows in the DB. Data retrieve fine. Top button works!
ps : removed all classes for simplicity
About main.php and recipe.inc.php. They are separated because recipe.inc.php is used in many documents.
main.php
<?php
$conn = mysqli_connect(localhost,****,****,loginsystem);
//DB connection
$query="SELECT * FROM `recipe` WHERE creator='$uid'";
//SQL Query
$results = mysqli_query($conn,$query);
$array = array();
//Array to save key column of the result in order
while ($row = mysqli_fetch_assoc($results)) {
for ($i = 0; $i < count($row[recipe_ID]); $i++) {
$array[$i] = $row[recipe_ID];
echo '<input type="hidden" id="recipe_ID" name="recipe_ID" value="';
echo $array[$i];
echo '">';
//might confuse you. this is just to hand over recipe_ID to recipe.inc.php
echo '<li>';
echo '<label>';
if($row[status]==1){
echo '<input type="checkbox" id="checkStatus" name="checkStatus" checked="">';
//In case where row[status] is equal to 1. means it's ON
}else{
echo '<input type="checkbox" id="checkStatus" name="checkStatus">';
//OFF otherwise
}
echo '<span class="switcher-indicator"></span>';
echo '</label>';
echo '</li>';
}
}
?>
recipe.inc.php
<?php
if(isset($_POST['checkStatus'])){
$recipe_ID = $_POST['recipe_ID']);
if($_POST['checkStatus']=='ON'){
$status = 1; //to save in DB as boolean. if ON->1
}else if($_POST['checkStatus']=='OFF'){
$status = 0; //if OFF->0
}
$sql = "UPDATE `recipe` SET `status`=$status WHERE creator=$uid AND recipe_ID=$recipe_ID";
//nev
mysqli_query($conn,$sql);
}
?>
and the Ajax part is saved in another js file.
recipe.js
$(document).ready(function() {
$('#checkStatus').on('click', function() {
var checkStatus = this.checked ? 'ON' : 'OFF';
var recipe_ID = $("#recipe_ID").val();
$.post("loginsystem/includes/recipe.inc.php", {
"checkStatus": checkStatus,
"recipe_ID": recipe_ID
},
function(data) {
$('#checkStatus').html(data);
});
});
});

Answer 1

That sounds like all the switches have the same ID. If that is the case, only the first one will work.
Try changing your code to look like this:
<?php
$conn = mysqli_connect(localhost,****,****,loginsystem);
//DB connection
$query="SELECT * FROM `recipe` WHERE creator='$uid'";
//SQL Query
$results = mysqli_query($conn,$query);
$cnt = 1;
$array = array();
//Array to save key column of the result in order
while ($row = mysqli_fetch_assoc($results)) {
for ($i = 0; $i < count($row[recipe_ID]); $i++) {
$array[$i] = $row[recipe_ID];
echo '<input type="hidden" id="recipe_ID-' .$cnt. '" name="recipe_ID" value="'; <============== HERE
echo $array[$i];
echo '">';
//might confuse you. this is just to hand over recipe_ID to recipe.inc.php
echo '<li>';
echo '<label>';
if($row[status]==1){
echo '<input type="checkbox" id="checkStatus-' .$cnt. '" name="checkStatus" checked="">'; //<============== HERE
//In case where row[status] is equal to 1. means it's ON
}else{
echo '<input type="checkbox" id="checkStatus-' .$cnt. '" name="checkStatus">'; //<================ HERE
//OFF otherwise
}
echo '<span class="switcher-indicator"></span>';
echo '</label>';
echo '</li>';
}
$cnt++; <=========== HERE
}
?>