PHP / AJAX为什么我的getAttribute只针对foreach代码中的第一行

So what I'm trying to do here is to show a list of users. In this list, each user has a button that sends two Ids to my database which is different for every user in the array. I send this data with an ajax call which you can see below.

The problem is, that the code only works for the first user in the list and not the others. My guess is that it is not working properly because every list item has the same id name so it only targets the first item with the .getelementbyid selector.

So my question is if there is any other way to make the buttons send the ids for each user individually.

I have tried using the .sibling selector but I'm not really sure how to implement it correctly.

<div class="content">
<div class="container-fluid">
    </div>
    <div class="row">
    <ul>
        <?php foreach ($module as $row) :?>
            <div class="col-md-8">
                <div class="toggleHolder">
                    <span class="toggler"><span>▾</span>Show More</span>
                    <span class="toggler" style="display:none;"><span>▴</span> Show Less</span>
                </div>
                <li><p id="post" data-id="<?php echo $row['id'] ?>"><?php echo $row['naam'] ?></p></li>

                <div class="showpanel" style="display: none;">
                    <li><p><?php echo $row['beschrijving'] ?></p></li>

                                <?php foreach ($patient as $row2): ?>
                                <div class="col-md-10">
                                        <div class='lists'>
                                            <li class="flex-item">
                                                <p class="text-left border-bottom post2" id="post2" data-id="<?php echo $row2['id'] ?>"><?php echo $row2['voornaam'].' '.$row2['achternaam'];?></p>
                                                <input id="btnSubmit" type="submit" value="Module toewijzen"/>
                                            </li>

                                    </div>
                                </div>
                                <?php endforeach; ?>
                </div>

            </div>
        <?php endforeach; ?>

    </ul>
    </div>
</div>

$(document).ready(function () {
    $("#btnSubmit").on("click", function (e) {
        console.log("clicked");

        // tekst vak uitlezen
        var module_id = document.getElementById("post").getAttribute("data-id");
        var user_id = document.getElementById("post2").getAttribute("data-id");
        // via AJAX update naar databank sturen
        $.ajax({
            method: "POST",
            url: "AJAX/clientmodule.php",
            data: {user_id: user_id,module_id: module_id} //update: is de naam en update is de waarde (value)

        })

            .done(function (response) {

                // code + message
                if (response.code == 200) {

                }
            });

        e.preventDefault();
    });
});

Thanks that definitely helped me in the right direction. with your code, all the buttons started working but I still had the problem that it only posted the ids from the first line.

this is how I eventually solved it:

$(function() {
    $(".btnSubmit").on("click", function(e) {
        e.preventDefault();
        console.log("clicked");

        var $container = $(this).closest('.col-md-10');
        var module_id = $container.closest('.col-md-8').find(".post").data('id');
        var user_id = $container.find(".post2").data('id');

        console.log("module : "+module_id);
        console.log("user : "+user_id);

         $.ajax({
            method: "POST",
            url: "AJAX/clientmodule.php",
            data: {
                user_id: user_id,
                module_id: module_id
                },
        success: function() {
    // callback logic here...
          }
      });
   });
});

The issue is because you're duplicating the same id within HTML output by the loop. That's invalid.

Use classes to group elements instead. You can then use DOM traversal to find the elements related to the clicked button and retrieve their values before sending the AJAX request.

Also note that if you use the success property of $.ajax then you don't need to check that the response code is 200 as it's guaranteed. It's also more robust as a 204 is also a valid response, but would technically not be caught in your original logic.

Finally, you were using a mix of jQuery and native methods where it's best to stick to only one or the other. To get the data-id attributes of the elements you can use data().

With all that said, try this:

$(function() {
  $(".btnSubmit").on("click", function(e) {
    e.preventDefault();

    var $container = $(this).closest('.col-md-8');
    var module_id = $container.find(".post").data('id');
    var user_id = $container.find(".post2").data('id');

    $.ajax({
      method: "POST",
      url: "AJAX/clientmodule.php",
      data: {
        user_id: user_id,
        module_id: module_id
      },
      success: function() {
        // callback logic here...
      }
    });
  });
});

<div class="container-fluid">
</div>
<div class="row">
  <ul>
    <?php foreach ($module as $row) :?>
      <div class="col-md-8">
        <div class="toggleHolder">
          <span class="toggler"><span>▾</span>Show More</span>
          <span class="toggler" style="display:none;"><span>▴</span> Show Less</span>
        </div>
        <li>
          <p class="post" data-id="<?php echo $row['id'] ?>">
            <?php echo $row['naam'] ?>
          </p>
        </li>
        <div class="showpanel" style="display: none;">
          <li>
            <p>
              <?php echo $row['beschrijving'] ?>
            </p>
          </li>
          <?php foreach ($patient as $row2): ?>
            <div class="col-md-10">
              <div class='lists'>
                <li class="flex-item">
                  <p class="text-left border-bottom post2" data-id="<?php echo $row2['id'] ?>">
                    <?php echo $row2['voornaam'].' '.$row2['achternaam'];?>
                  </p>
                  <input class="btnSubmit" type="submit" value="Module toewijzen" />
                </li>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    <?php endforeach; ?>
  </ul>
</div>