Laravel: How to show dynamic data on popup modal related to image on every image click

Question

I have to setup a Novel setup means I have to show episodes of every related novel on its click.

   public function Novels()
    {
        $Novels = Novel::latest()->get();
        foreach($Novels as $novel)
        $novel->episodes = NovelEpisode::where('novel_id', $novel->id)->get();
        
        return view('novels.Novels',compact('Novels'));
    }

Here's my laravel controller blade code .

and Here's my blade code with a modal inside.

 <div class="row mx-0 top-75">
                @foreach ($Novels as $novel)
                <div class="col-lg-4 col-md-4 text-end">
                    <div class="card">
                        <div class="card-body top-65">
                            <img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid" alt="img" id="myImg" >
                            <h5 class="card-title mbot-20 ptop-50">{{ $novel->name }}</h5>
                            <p class="card-text">{{ $novel->description }}</p>
                            <p class="price-text mb-5">قیمت۱۸۰۰روپے</p>
                            <div class="modal fade" id="myModal" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-body" id="modaldata">
                                            @foreach ($novel->episodes as $episode)
                                            <div class="container">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="main mt-2">
                                                            <div class="d-flex justify-content-center">
                                                                <a href="{{route('episode',['id'=>$episode->id])}}" class="text-decoration-none">
                                                                    <div class="modal-cont">
                                                                    <p class="mod-text">{{$episode->episode}}<span class=""><i class="fa-solid fa-angle-right next-icn"></i></span></p>
                                                                    </div>
                                                                </a>                                               
                                                            </div>
                                                        </div>                                                                  
                                                    </div>
                                                </div>          
                                            </div>
                                            @endforeach 
                                        </div>                                                   
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>            
                @endforeach
            </div>

Here's my jquery code which i'm using to popup modal.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#myImg').click(function(){
              $('#myModal').modal('show')
        });
    });
    </script>

Answer 1

When you want to put an event listener on multiple doms, you need to use a class and not an id since ids attribute can target only one dom.

$('.myImg').click(function(){

Next to target the right modal for each image, you need to have a way to differentiate between them. (also give each modal a unique id)

<div class="modal fade" id="myModal-{{$novel->id}}" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >

Now you only need a way to get the correct modal id to show it. one easy solution is to use data-x attributes

<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid myImg" alt="img" data-id="{{$novel->id}" >

And that's it.

$('.myImg').click(function(){
    let id = $(this).data('id');
    $('#myModal-'+id).modal('show')
});

Another Solution without using data-x attribute

use classes and target the modal with find() or siblings()

 <img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid myImg" alt="img" > 
//...used class

<div class="modal fade" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
//... removed the id (not unique)

And the JS

$('.myImg').click(function(){
    let modal = $(this).parent().find('.modal')[0];
    $(modal).modal('show')
});
//or
$('.myImg').click(function(){
    let modal = $(this).siblings('.modal')[0];
    $(modal).modal('show')
});

This is possible since both the img and the modal are on the same level.