How to fix cant retrieve data with jquery - php

Question

i should tell you my code is actually work, but a litle bit of annoying problem i cant solve by my self.
The problem is i only can retrieve the first record(id) from my data grid but i cant retrieve the second or other record id
example :
when i click my edit button of my first record of my data then i want to send the id to my jquery and show it in console and use it for selecting data form database (this is work)
but when i click edit of my second record of my data it wont send data to my Jquery and show it in console
This is my Grid code
<?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'];?>
編集
</li>
<?php endforeach;?>
</div>
</div>
this is my 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

Your loop creates multiple elements with the same id (id="showUpdateModal"). Id's must be unique within a document, so when you select it with: $('#showUpdateModal'), it will always return the first element with that id (since there shouldn't be any more elements with the same id).
You can solve it by using a class instead:
編集
(I removed the id and added showUpdateModal as a class instead)
Now you can register the event on the class instead:
$('.showUpdateModal').on('click', function() {
// Your current code
});