如何在循环生成的元素中使用PHP的jquery选择特定元素？

Question

First of all, I'm newbie to web programming. That said, I would really appreciate it if you could show me in the most understandable way to beginners. I'm trying to select and edit from while loop generated lists using jQuery. What I want is to update available members when a user clicks edit link and input another available member. My code is as follows:

       //fetch all available staffs
    $queryedit =  mysql_query("SELECT * FROM staffs WHERE Avail = 'yes'");
       while($row = mysql_fetch_assoc($queryedit)):
       $avail_staffs = $row['name'];
       $id = $row['id']; ?>
        <h4><?php echo $avail_staffs; ?></h4>
         <!--form is the child of <a> -->
        <a href='#' class="edit-<?php echo $id; ?>">Edit
                 <!--Hidden form that appears when I want to edit Staffs->
           <form id="hidden_form" style="display:none;">
               <input type="text" class="staff-name" placeholder="Enter Staff name">
               <button id="edit-<?php echo $id?>">update</button>
           </form>
       </a>
           <?php endwhile ?> 

Then I tried to handle them in jQuery like this:

        $(".edit").click(function () {
          //display hidden form
         $(this).find('form').show();
         //when the previously hidden button is clicked, grab the value in the input field & send to update.php
         $(this).find('button').click(function () {
          var staffs = $("input=[class='staff_name']").val();
           $.post("internal/update.php",{staffs:staffs},function(data) {
             alert("Updated");
              }); 

           });
          });

But this only updates the first name. It only applies change to the first member name even when I click the last one.

Answer 1

You can do something like this:

$(".edit").click(function () {
    //display hidden form
    $(this).find('form').show();
    //when the previously hidden button is clicked, grab the value in the input field & send to update.php
    $(this).find('button').click(function () {
        var input = []; // create a new empty array 

        $('#hidden_form').each($('input'), function(){ // loop over each of the inputs
            input.push($(this).val()); // grab input value and add it to the array
        });
        $.post("internal/update.php",{input:input},function(data) {
            alert("Updated");
        });
    });
});

Haven't tested it, so there may be a few kinks here and there.