Alguien me puede ayudar con js?? Necesito que al ejecutarse este foreach enlace la variable {{$post->id}} para abrir los diferentes modals de diálogo para cada publicación. ¿Cómo puedo implementar mi variable {{post->id}} en js y generar una "id" para cada publicación?
Todo este código está dentro de otro foreach que lista todas las publicaciones:
<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>
Mi js es muy malo agradecería cualquier ayuda. Gracias 😉