How can i add a modal multiple times in laravel9

Question

Am trying to add a modal at multiple locations in my view but only one occurrence of the modal works in my laravel view. The first occurrence of the modal works. The rest which happen to apper in the othe table rows are not working. Please help me resolve this error. I need the modal to repeat it self in all the table rows because i need them to perform an action on each of the rows in the table

this is the view

                </div> --}}
                <a href="/menu/create">Create</a>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Dish Id</th>
                            <th>Menu_name</th>
                            <th>Unit Cost</th>
                            <th>Dish Details</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if ($menu->count())
                   @foreach ($menu as $index => $menu)
                   <tr>
                    {{-- <th scope="row">{{$index + $menu->firstItem()}}</th> --}}
                    <td>{{$menu->id}}</td>
                    <td>{{$menu->menu_name}}</td>
                    <td>{{$menu->unit_cost}}</td>
                    <td>
                        @foreach ($menu->description as $description)
                        {{$description}}
                        @endforeach
                    </td>
                    <td width="150">
                      <a href="{{route('menu.show', $menu->id)}}" title="Show"><i class="fas fa-eye"></i>show</a> <span></span>
                      <a href="{{route('menu.update', $menu->id)}}" title="Edit"><i class="fa-duotone fa-pen"></i>Edit</a> <span></span>
                      @include('menu.order_menu')
                      <form method="POST">
                        @csrf
                        @method('DELETE')
                        <a href="{{route('menu.destroy', $menu->id)}}"><div class="delete"> Delete?? </div></a>

                      </form>

                    </td>
                  </tr>
                   @endforeach



                  @endif



                this the modal    </tbody>
                </table>
                {{-- {{$menu->links()}} --}}
            </div>



        </div>


@endsection


<!-- this is the code for the modal -->

   <!-- Trigger/Open The Modal -->
   <button id="myBtn">order</button>

   <!-- The Modal -->
   <div id="myModal" class="modal">

     <!-- Modal content -->
     <div class="modal-content">
        <h2>{{$menu->menu_name}}</h2>
        @foreach ($menu->description as $description)
                        {{$description}}
                        @endforeach
        <h2>{{$menu->unit_cost}} </h2>

        <form action="">
       <button>order</button>
       <button>customize</button>
        </form>

     </div>

   </div>

   <script>
    // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


</script>

Answer 1

Tim inspired me to take another approach to solve this problem. And I am most grateful to him.

I realized that all the table entries had unique names and IDs in the database so I used the Ids and names as the button id and modals IDs. This way, all entries have unique modal and button Id's

 <!-- Trigger/Open The Modal -->
   <button id="{{$menu->id}}">order</button>

   <!-- The Modal -->
   <div id="{{$menu->menu_name}}" class="modal">

     <!-- Modal content -->
     <div class="modal-content">
        <h2>{{$menu->menu_name}}</h2>
        @foreach ($menu->description as $description)
                        {{$description}}
                        @endforeach
        <h2>{{$menu->unit_cost}} </h2>

        <form action="">
            <button>order</button>
        </form>

        <form action="">
            <button>customize</button>
        </form>

     </div>

   </div>

   <script>
    // Get the modal
var modal = document.getElementById("{{$menu->menu_name}}");

// Get the button that opens the modal
var btn = document.getElementById("{{$menu->id}}");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


</script>