Bootstrap 5 Modal Not Working Blade File Laravel

The laravel bootstrap modal not working while the modal is use inside the loop, This is the simple solution for that, I have provided a simple solution by adding a dynamic id name inside the id attribute.

The bootstrap modal not working because the conflict is inside the loop, The id should never be duplicated in the whole application that why it is not able to open the modal because of multiple ids defined in the application. While the loop running it creates multiple times the same modal HTML code that it creates duplicates it's the reason why not working modal inside the loop.

Solution

@foreach ($response as $key => $value)
//$key  this key I will use this after-modal id for making dynamic ids
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-{{$key}}">Click To Open Modal</button>
// BOOTSTRAP MODAL
<div class="modal fade" id="exampleModal-{{$key}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-{{$key}}" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel-{{$key}}">New message</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">
            <form>
            <div class="form-group">
                <label for="recipient-name" class="col-form-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name-{{$key}}">
            </div>
            <div class="form-group">
                <label for="message-text" class="col-form-label">Message:</label>
                <textarea class="form-control" id="message-text-{{$key}}"></textarea>
            </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
        </div>
        </div>
    </div>
    </div>
@endforeach

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)