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

Question

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

Answer 1

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