I have a table with events and actions to delete the events. How do I pass the id of the event (and maybe the whole event to also get the title) to the modal? I am using bootstrap and Laravel.
entry_list.blade.php:

@include('calendar.delete_event_confirmation');
<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Title</th>
            <th scope="col">Description</th>
            <th scope="col">Start Date</th>
            <th scope="col">End Date</th>
            <th scope="col">All Day</th>
            <th scope="col">User ID</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($events as $event)
        <tr>
            <th scope="row">{{ $event->id }}</th>
            <td>{{ $event->title }}</td>
            <td>{{ $event->description }}</td>
            <td>{{ $event->start_date }}</td>
            <td>{{ $event->end_date }}</td>
            <td>{{ $event->all_day }}</td>
            <td>{{ $event->user_id }}</td>
            <td>
                <a href="{{ route('events.show', $event->id) }}"><i class="bi bi-eye"></i></a>
                <a href="{{ route('events.edit', $event->id) }}"><i class="bi bi-pencil"></i></a>
                <button data-bs-toggle="modal" data-bs-target="#deleteEventModal" data-event-id="{{ $event->id }}">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

delete_event_confirmation.blade.php:

@extends('layouts.app')

@section('content')
<!-- Modal -->
<div class="modal fade" id="deleteEventModal" tabindex="-1" role="dialog" aria-labelledby="deleteEventModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteEventModalLabel">Delete Event</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the event?</p>
                <span id="eventId"></span>
            </div>
            <div class="modal-footer">
                <form action="{{ route('events.delete', $event->id) }}" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

app.js:

$('#deleteEventModal').on('show.bs.modal', function (e) {
  //get data-id attribute of the clicked element
  let eventId = $(e.relatedTarget).data('event-id');

  //populate the span
  $(e.currentTarget).find('span[id="eventId"]').val(eventId);
});

I tried to put the id into the modal using data-bs-target="#deleteEventModal" and passing the event to the blade file @include('calendar.delete_event_confirmation', ['event' => $event]); but the event isn’t defined at the top.
I tried the answers at text but I get the error “Undefined variable $event” in the delete_event_confirmation file.