Someone can help me with js?? I need that all the time that this foreach is executed create an "id" to open the diferents dialog modals for each posts. How i can implement my {{post->id}} in js and generate new "id" for each posts?
This all code are inside another foreach that list all the posts:
<button type="button" id="btn-open-modal">
Open
</button>
<dialog id="modal">
<table>
@foreach ($post->likers as $user)
<tr>
<td>
<a href="{{ route('profile', ['id' => $user->id]) }}">
<img class="rounded-md" style="width:50px; height:50px;"
src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" />
</a>
</td>
<td>
<a href="{{ route('profile', ['id' => $user->id]) }}">
{{$user->name}}
</a>
</td>
</tr>
@endforeach
</table>
<button id="btn-close-modal" class="btn">
Close
</button>
</dialog>
<script>
const btnOpenModal = document.querySelector("#btn-open-modal");
const btnCloseModal = document.querySelector("#btn-close-modal");
const modal = document.querySelector("#modal");
btnOpenModal.addEventListener("click",()=>{
modal.showModal();
})
btnCloseModal.addEventListener("click",()=>{
modal.close();
})
</script> My js is very bad I would appreciate any help. Thanks 😉
I have tried but I can't do it... If i put manually the post id especific it works like this +[id='12']
How can i pass this variable {{$post->id}} inside the script?
var id = $(this).data('id');
const btnOpenModal = document.querySelector("#btn-open-modal" + [id = '12']);
const btnCloseModal = document.querySelector("#btn-close-modal" + [id = '12']);
const modal = document.querySelector("#modal" + [id = '12']);
btnOpenModal.addEventListener("click", () => {
modal.showModal();
})
btnCloseModal.addEventListener("click", () => {
modal.close();
})<button type="button" id="btn-open-modal{{$post->id}}">
Open
</button>