Как исправить не могу получить данные с помощью jquery

Question

Я должен сказать, что мой код на самом деле работает, но немного раздражает проблему, которую я не могу решить самостоятельно.

Проблема в том, что я могу получить только первую запись (id) из моей сетки данных, но я не могу получить вторую или другую запись id

пример: когда я нажимаю кнопку редактирования моей первой записи моих данных, я хочу отправить идентификатор в jquery, показать его в консоли и использовать его для выбора базы данных формы данных (это работа)

но когда я щелкаю по редактированию моей второй записи моих данных, он не отправляет данные в мой Jquery и не отображает их в консоли

Это мой Grid-код

    <?php foreach($data['gakubu_data'] as $gakubu):?>
        <li class="list-group-item d-flex justify-content-between align-items-center"><?= $gakubu['code_gakubu'];?> | <?= $gakubu['gakubu'];?>

        <a href="" data-code="<?= $gakubu['code_gakubu']?>" id="showUpdateModal" class="badge badge-success" data-toggle="modal" data-target="#formModal">編集</a>
        </li>

    <?php endforeach;?> 

    </div>
</div>

это мой Jquery Script

$(function(){

$('#showUpdateModal').on('click',function(){

    $('#formModalLabel').html('データ編集');
    $('.modal-footer button[type=submit]').html('データ編集');
    const id = $(this).data('code');
    console.log(id);


 });
});

Answer 1

Ваш цикл создает несколько элементов с одинаковым идентификатором (id="showUpdateModal"). Идентификатор должен быть уникальным в документе, поэтому, когда вы выбираете его с помощью: $('#showUpdateModal'), он всегда будет возвращать первый элемент с этим идентификатором (так как больше не должно быть больше элементов с тем же идентификатором) .

Вы можете решить эту проблему, используя вместо этого класс:

<a href="" data-code="<?= $gakubu['code_gakubu']?>" class="showUpdateModal badge badge-success" data-toggle="modal" data-target="#formModal">編集</a>

(я удалил идентификатор и добавил showUpdateModal как класс)

Теперь вы можете зарегистрировать событие в классе:

$('.showUpdateModal').on('click', function() {
    // Your current code
});