На моем сайте работает только самый верхний переключатель

Question

Я использую HTML, PHP и Ajax для переключения на моем сайте.Однако функционирует только самый верхний переключатель.Причина, по которой я использую PHP, заключается в отображении результатов из моей БД, а Ajax - для переключения без перезагрузки веб-сайта.Заранее спасибо и комментируйте любые вопросы!

Фото Здесь: У меня есть три строки в БД.Данные извлекаются нормально.Верхняя кнопка работает!

ps: для простоты удалены все классы

О файлах main.php и recipe.inc.php.Они разделены, потому что recipe.inc.php используется во многих документах.

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

и часть Ajax сохраняется в другом файле js. 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

Похоже, все коммутаторы имеют одинаковый идентификатор.В этом случае будет работать только первый.

Попробуйте изменить код так, чтобы он выглядел следующим образом:

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