data-bs-target with id not working in laravel

Question

I have a modal pop out when pressing a button. Problem is, how do pass the value to the modal?

My table as shown in figure below. As you can see each row have different id. I wanted to get the id of a particular row after pressed the button.

The problem is how to display data in to bootstrap modal according to id. Thanks in advance.

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>ردیف</th>
            <th>مقطع تحصیلی</th>
            <th>رشته تحصیلی</th>
            <th>تاریخ اخذ مدرک</th>
            <th>جزییات بیشتر</th>
        </tr>
        </thead>
        <tbody>
        @foreach($user->educationals as $educational)
            <tr>
                <td class="fw-normal">{{ $educational->id }}</td>
                <td class="fw-normal">{{ $educational->grade }}</td>
                <td class="fw-normal">{{ $educational->major }}</td>
                <td class="fw-normal">{{ $educational->end }}</td>
                <td><a class="btn btn-link" data-bs-toggle="modal" data-bs-target="#educationals{{ $educational->id }}">جزییات بیشتر</a></td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

@if(isset($educational))
    <div class="modal fade" id="educationals{{ $educational->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="educationals{{ $educational->id }}" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="educationals{{ $educational->id }}">درخواست</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <tr>
                            <th>مقطع تحصیلی</th>
                            <td>{{ $educational->grade }}</td>
                        </tr>
                        <tr>
                            <th>رشته تحصيلي</th>
                            <td>{{ $educational->major }}</td>
                        </tr>
                        <tr>
                            <th>معدل</th>
                            <td>{{ $educational->avg }}</td>
                        </tr>
                        <tr>
                            <th>تاريخ شروع</th>
                            <td>{{ $educational->start }}</td>
                        </tr>
                        <tr>
                            <th>تاريخ اخذ مدرك</th>
                            <td>{{ $educational->end }}</td>
                        </tr>
                        <tr>
                            <th>موسسه دريافت اخذ مدرك</th>
                            <td>{{ $educational->docPlaceName }}</td>
                        </tr>
                        <tr>
                            <th>عنوان پايان نامه / رساله</th>
                            <td>{{ $educational->thesisTitle }}</td>
                        </tr>
                        <tr>
                            <th>مدارك</th>
                            <td>{{ $educational->upload_doc }}</td>
                        </tr>
                        <tr>
                            <th>کشور محل دريافت مدرك</th>
                            <td>{{ $educational->docPlaceCountry }}</td>
                        </tr>
                        <tr>
                            <th>شهر محل دريافت مدرك</th>
                            <td>{{ $educational->docPlaceCity }}</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">اوکی</button>
                </div>
            </div>
        </div>
    </div>
@else
    <div class="alert alert-warning text-center" role="alert">
        اطلاعاتی وجود ندارد.
    </div>
@endif

Answer 1

You have many options but I suggest you to use javascript in any form you prefer. But if you don't want to use javascript, you should make model for each of table rows.

@foreach($user->educationals as $educational)
    <div class="modal fade" id="educationals{{ $educational->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="educationals{{ $educational->id }}" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="educationals{{ $educational->id }}">درخواست</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <tr>
                            <th>مقطع تحصیلی</th>
                            <td>{{ $educational->grade }}</td>
                        </tr>
                        <tr>
                            <th>رشته تحصيلي</th>
                            <td>{{ $educational->major }}</td>
                        </tr>
                        <tr>
                            <th>معدل</th>
                            <td>{{ $educational->avg }}</td>
                        </tr>
                        <tr>
                            <th>تاريخ شروع</th>
                            <td>{{ $educational->start }}</td>
                        </tr>
                        <tr>
                            <th>تاريخ اخذ مدرك</th>
                            <td>{{ $educational->end }}</td>
                        </tr>
                        <tr>
                            <th>موسسه دريافت اخذ مدرك</th>
                            <td>{{ $educational->docPlaceName }}</td>
                        </tr>
                        <tr>
                            <th>عنوان پايان نامه / رساله</th>
                            <td>{{ $educational->thesisTitle }}</td>
                        </tr>
                        <tr>
                            <th>مدارك</th>
                            <td>{{ $educational->upload_doc }}</td>
                        </tr>
                        <tr>
                            <th>کشور محل دريافت مدرك</th>
                            <td>{{ $educational->docPlaceCountry }}</td>
                        </tr>
                        <tr>
                            <th>شهر محل دريافت مدرك</th>
                            <td>{{ $educational->docPlaceCity }}</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">اوکی</button>
                </div>
            </div>
        </div>
    </div>
@endforeach