只有最顶级的交换机才能在我的网站上运行

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
     } 
?>