Laravel | same button with different functions - laravel

Question

I have two buttons that will open a modal, but I don't know how to differentiate them to open the right modal.
It's an accept button and a reject button.
<a id='aceitar' href="{{route('despesas.modal', $item)}}">
<i class="fas fa-check text-info mr-1"></i>
</a>
<a href="{{route('despesas.modal2', $item)}}">
<i class="fas fa-ban text-danger mr-1"></i>
</a>
Modal acept
<?php
if (#$id != "") {
echo "<script>$('#modalaceitar').modal('show');</script>";
}
?>
modal reject
<?php
if (#$id != "") {
echo "<script>$('#modalrejeita').modal('show');</script>";
}
?>
Do I have any way to differentiate them? Because both check if the ID is different from empty
if (#$id != "")

Answer 1

You could use a data attribute to target the required modal.
<button class="open-modal" data-target="modal-a">Modal A</button>
<button class="open-modal" data-target="modal-b">Modal B</button>
<div id="modal-a" class="hidden">Modal A</div>
<div id="modal-b" class="hidden">Modal B</div>
The .hidden class applied above simply sets the css display property to none.
.hidden {
display: none;
}
Then using some JavaScript, you can apply click event handlers to each button by using querySelectAll to find all button elements with the given class name and then when a button is clicked, read the data-target dataset and toggle (or remove) the display property for that modal.
let buttons = document.querySelectorAll('.open-modal');
buttons.forEach(button => {
button.addEventListener('click', function (event) {
document.getElementById(event.target.dataset.target).classList.toggle('hidden');
});
});
Example JSFiddle here