Почему кнопка работает только для первой строки?

Question

HTML:

<?php 
      $username = "trainerapp"; 
      $password = "password"; 
      $hostname = "localhost"; 
      $link = @mysql_connect($hostname, $username, $password); 

      if(@mysql_select_db("trainer_registration")) 
      { 
       $check_query = @mysql_query("select id,program_name, company, date_prog from program_details"); 
       while($row = @mysql_fetch_assoc($check_query)){ 

         # code... 
        ?> 
       <div class = "container content-rows"> 
        <div class = "col-md-1" id = "snocontent"><?php echo $row['id'] ?></div> 
        <div class = "col-md-3" id = "pgnamecontent"><?php echo $row['program_name'] ?></div> 
        <div class = "col-md-3" id = "cmpcontent"><?php echo $row['company'] ?></div> 
        <div class = "col-md-2" id = "datecontent"><?php echo $row['date_prog'] ?></div> 
        <button onclick="add_trainers()" ><span class = "glyphicon glyphicon-king" class = "addtrainersbutton" id ="addtrainersbutton" title = "Add Trainers" ></span></button> 
        <span class = "glyphicon glyphicon-pencil" id = "editprogrambutton" title = "Edit Program"></span> 
        <span class = "glyphicon glyphicon-user" id = "assigntrainersbutton" title = "Assign Trainers for the Program"></span> 
        <span class = "glyphicon glyphicon-remove" id = "deleteprogrambutton" title = "Delete the Program"></span> 



       </div> 
      <?php  }} 
      else { 

      } 


     ?> 
     <div class = "addtrainers" id = "addtrainersblock" hidden = "true"> 
         <?php 
           $email_query = @mysql_query("select email_id from facilitator_details"); 
           $check_query = @mysql_query("select firstname,lastname from facilitator_details"); 
           while($row = @mysql_fetch_assoc($check_query)) { ?> 
           <input type = "checkbox" name = "trainernames"id = "checkboxtrain" value ="<?php echo $row["firstname"]." ".$row["lastname"] ?>" name = "trainerbox"> 
           <?php echo $row["firstname"]." ".$row["lastname"] ?> </input></br> 
           <?php } ?> 
           <button class="btn btn-default" id = "sendemail">Send Email</button> 
        </div> 
        <div class = "editprogramdetails" id = "editprogramblock" hidden = "true"> 
         <form class="form" action="#" id="update" method ="POST"> 
         <?php 

          $programid_query = @mysql_query("select id,program_name,company,date_prog from program_details"); 
          $row = @mysql_fetch_assoc($programid_query); 
          ?> 
          ID: <input type = "text" id = "programnum" value = "<?php echo $row["id"] ?>" readonly/><br> 
          Program Name: <input type = "text" id = "prognameedit" placeholder = "<?php echo $row["program_name"] ?>"/><br> 
          Company Name: <input type = "text" id = "compnameedit" placeholder = "<?php echo $row["company"] ?>"/><br> 
          Date: <input type = "date" id = "dateedit" placeholder = "<?php echo $row["date_prog"] ?>"/><br> 

          <input type="button" class = "btn btn-default" id = "updatebutton" value ="Update"></input> 
         </form> 
        </div> 

Файл сценария находится в том же файле PHP: SCRIPT ФАЙЛА:

<script> 
     $(document).ready(function() { 

       $("#addtrainersbutton").click(function(){ 
       $("#addtrainersblock").toggle(); 
       $("#editprogramblock").hide(); 
       }); 

       $("#editprogrambutton").click(function(){ 
       $("#editprogramblock").toggle(); 
       $("#addtrainersblock").hide(); 
       }); 


    $("#updatebutton").click(function(){ 
     var programidphp = $("#programnum").val(); 
     var programnamephp = $("#prognameedit").val(); 
     var companynamephp = $("#compnameedit").val(); 
     var datephp = $("#dateedit").val(); 

     var updaterequest = { 
      upprogid : programidphp, 
      upprognam : programnamephp, 
      upcompnam : companynamephp, 
      uppdate : datephp, 
     }; 
     $.post("/TrainerApp/update_program.php", updaterequest).done(function(data){ 
      alert(data); 
     }).fail(function(){ 
      alert("Failed"); 
     }); 

    }); 

    $("#sendemail").click(function(){ 
    $('input[name="trainernames"]:checked').each(function() { 
     var f_name=this.value.split(" ")[0]; 
     var l_name=this.value.split(" ")[1]; 
     console.log("fname:",f_name); 
     console.log("lname:",l_name); 

     var trainee_list = [{ 
      first_name : f_name, 
      last_name: l_name 
     }]; 
     console.log(trainee_list); 
    }); 
    }); 
}); 
function add_trainers() { 
       console.log("in add trainers function"); 
       $("#addtrainersblock").toggle(); 
       $("#editprogramblock").hide(); 
      } 
     </script> 

Проблема:

Кнопка "addtrainersbutton", "editprogrambutton" отобразить необходимые только для первой строки значений, возвращаемых mysql_fetch_assoc. Для остальных строк кнопки не работают. Пожалуйста, взгляните на код и сообщите мне, какая ошибка здесь делается.

Answer 1

У вас есть дублированные идентификаторы, и это не сработает. Измените их на классы, чтобы заставить их работать. Например изменить

$("#addtrainersbutton").click(function(){ 

в

$(".addtrainersbutton").click(function(){ 

После этого вы должны изменить свой HTML соответственно.