Jquery select data-id from second row on table

Question

I've been trying to make a table with a list of users for a school project. I'm doing this with jquery, php and mysql.

I'm retrieving all data from the mysql database and printing it out in a table. now i'm trying to add an update button to i can easily update data for each specific row.

This however is not working as expected. It only selects the data from the same row. While the data-id value is different. Could anyone tell me why this is happening? I'll leave my code below for clearance

JS:

$(document).ready(function () {
   $(document).on('click', '#update-btn', function () {
       var id =$("[id='update-btn']").attr('data-id');
       var username = $('#username').val();
       var dob = $('#dob').val();
       var address = $('#address').val();

       $.ajax({
          url: 'ajax/update.php',
          method: 'POST',
          data: {
              ID: id,
              username: username,
              dob: dob,
              address: address
          },
          success: function (data) {
              if (data){
                  console.log(data);
                  swal({
                      title: 'Update successful',
                      icon: 'success',
                      text: 'User with ID ' + id + ' updated.'
                  });
                  setTimeout(function () {
                      window.location = 'medewerkers.php';
                  }, 5000)

              }
              else if (data === "update_failed"){

              }
          }
       });
   });
});

PHP:

public static function loadMedewerkers(){
$mysql = Database::DBCon()->prepare('

    SELECT * FROM medewerkers

');
$mysql->execute();

while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{

    $html = '<tr>
                <td><input type="text" value="'. $fetch['username'] .'" id="username"></td>
                <td><input type="text" value="'. $fetch['dob'] .'" id="dob"></td>
                <td><input type="text" value="'. $fetch['address'] .'" id="address"</td>
                <td><button type="button" class="btn btn-danger" id="delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
                    <button type="button" class="btn btn-warning" id="update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
             </tr>';
    echo $html;
}

}

Answer 1

The problem is because your loop is causing multiple elements to have the same id, when id attributes must be unique within the DOM. To fix this use common classes on the elements within the loop, then DOM traversal to find them when the button is clicked.

public static function loadMedewerkers()
{
  $mysql = Database::DBCon()->prepare('SELECT * FROM medewerkers');
  $mysql->execute();
  while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
  {
    $html = '<tr>
      <td><input type="text" value="'. $fetch['username'] .'" class="username"></td>
      <td><input type="text" value="'. $fetch['dob'] .'" class="dob"></td>
      <td><input type="text" value="'. $fetch['address'] .'" class="address"</td>
      <td>
        <button type="button" class="btn btn-danger delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
        <button type="button" class="btn btn-warning update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
    </tr>';
    echo $html;
  }
}

$(document).ready(function() {
  $(document).on('click', '.update-btn', function() {
    var $row = $(this).closest('tr');
    var id = $(this).data('id');
    var username = $row.find('.username').val();
    var dob = $row.find('.dob').val();
    var address = $row.find('.address').val();

    // ajax request here...
  });
});

Note the use of data() to retrieve the data attribute. Also note that you could put the data-id attribute itself on the tr instead of each button to DRY up the HTML slightly.