JQuery Click处理程序仅适用于第一项

With a table I am making I have to make something that will be able to change a value in the database for each row. The problem is that the situation I have right now only affects the tr in the table and not the other tr's.

I am working with Flight (MVC) and this is my code: The View:

<tbody>
<?php foreach($this->objarrAll as $key => $value){ ?>
<tr>
    <td><?= $value['category']; ?></td>
    <td><?= $value['user_send']; ?></td>
    <td><?= $value['points']; ?></td>
    <td><a href="javascript:void(0)" data-toggle="modal"
           data-target="#modal-view-<?= $value['id']; ?>">Bekijken</button></td>
    <div id="modal-view-<?= $value['id']; ?>" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Inzending van <?= $value['user_send']; ?></h4>
                </div>
                <div class="modal-body">
                    <p><img width="868px"
                            src="#">
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="uid" value="<?= $value['user_send']; ?>"/>
    <input type="hidden" id="points" value="<?= $value['points']; ?>"/>
    <input type="hidden" id="row_id" value="<?= $value['id']; ?>"/>
    <td><a class="submitPoints" href="javascript:void(0)">Geef punten</a></td>
</tr>
<?php } ?>
</tbody>

The Javascript/AJAX-code:

$(".submitPoints").on("click", function () {

    var uid = $('#uid').val();
    var points = $('#points').val();
    var row_id = $('#row_id').val();

    var data = {
        uid: uid,
        points: points,
        row_id: row_id
    };

    $.ajax({
        type: "POST",
        url: "/update/user/points",
        async: true,
        data: data,
        success: function (data) {
            console.log("De " + points + " punten zijn toegekend aan " + uid + "");
            var err = jQuery.parseJSON(data);
            sendAlert.createAlert(err.return, err.type);
            $("#check-view").load("/admin/table/check/all", function () {
            });
        }
    });


});

The Model and Controller are working fine, because the SQL query is being executed.

First change your ids to classes

<input type="hidden" class="uid" value="<?= $value['user_send']; ?>"/>
<input type="hidden" class="points" value="<?= $value['points']; ?>"/>
<input type="hidden" class="row_id" value="<?= $value['id']; ?>"/>

Second put a class on your tr

<tr class="row">

Then change your binding to be a contextual lookup.

$(".submitPoints").on("click", function (e) {
    var $row = $(e.target).closest('.row');
    var uid = $row.find('.uid').val();
    var points = $row.find('.points').val();
    var row_id = $row.find('.row_id').val();

OPTIONALLY, you could use data elements, and forget about hidden fields all together.

<td><a class="submitPoints" href="javascript:void(0)" data-uid="<?= $value['user_send']; ?>" data-points="<?= $value['points']; ?>" data-rowid="<?= $value['id']; ?>">Geef punten</a></td>

In which case your event handler would just be...

$(".submitPoints").on("click", function (e) {
    var $submit = $(e.target);
    var uid = $submit.data('uid');
    var points = $submit.data('points');
    var row_id = $submit.data('rowid');

I'm sure the click handler is working on all elements, this is the problem:

var uid = $('#uid').val();
var points = $('#points').val();
var row_id = $('#row_id').val();

id attributes need to be unique, when you refer to them in this way it will return the first one found in the DOM. You could try changing to:

var uid = $(this).find('#uid').val();
var points = $(this).find('#points').val();
var row_id = $(this).find('#row_id').val();

But it would be better to switch to class instead of id

var uid = $(this).find('.uid').val();
var points = $(this).('.points').val();
var row_id = $(this).find('.row_id').val();

<input type="hidden" id="uid_<?php echo $value['id']; ?>" value="<?= $value['user_send']; ?>"/>
<input type="hidden" id="points_<?php echo $value['id']; ?>" value="<?= $value['points']; ?>"/>
<input type="hidden" id="row_id_<?php echo $value['id']; ?>" value="<?= $value['id']; ?>"/>
<td><a class="submitPoints" href="ajax_call('uid_<?php echo $value['id']; ?>','points_<?php echo $value['id']; ?>','row_id_<?php echo $value['id']; ?>')">Geef punten</a></td>


<script>
function ajax_call(id_1,id_2,id_3)
{
var uid = $('#'+id_1).val();
    var points = $('#'+id_2).val();
    var row_id = $('#'+id_3).val();

    var data = {
        uid: uid,
        points: points,
        row_id: row_id
    };

    $.ajax({
        type: "POST",
        url: "/update/user/points",
        async: true,
        data: data,
        success: function (data) {
            console.log("De " + points + " punten zijn toegekend aan " + uid + "");
            var err = jQuery.parseJSON(data);
            sendAlert.createAlert(err.return, err.type);
            $("#check-view").load("/admin/table/check/all", function () {
            });
        }
    });
}
</script>