I have 5 modals each one with a unique id.
<div class="modal fade" id="<?php echo "game-modal-" . $fetch['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="Game Modal" aria-hidden="true">
In the modals I have a hidden input that echo's the id.
<input type="hidden" name="" value="<?php echo $fetch['id']; ?>" class="game-id">
When I unhide the inputs it displays the correct id depending on which modal is being displayed. I then have a cancel button in the modal that when clicked should display the id. But it doesnt display the correct id just the first one. Why would it send js the wrong id when it is in a unique modal and whats the best approach to this problem?
$('.cancel-button').click(function(){
var gameId = $(".game-id").val();
alert(gameId);
});
<button class="btn btn-outline-light btn-sm cancel-button" type="submit">Cancel</button>