delete modal

hi, i have crud of roles , the delete is a modal but when i delete an role he delete the first one . Any help please. this is the code .

<div class="modal-{{ $role->id }} opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
            <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
            
            <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
              
              <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
                <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                  <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                </svg>
                <span class="text-sm"></span>
              </div>
               <!-- Add margin if you want to see some of the overlay behind the modal-->
               <div class="modal-content ml-4 mt-2 mb-2 mr-4 text-left">
                <!--Title-->
                <div class="flex justify-between items-center pb-3 py-1 ">
                  <div class=" text-cyan-500 text-3xl" >Delete Role</div>
                  <div class="modal-close cursor-pointer z-50">
                    <svg class="fill-current text-cyan-700" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                      <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                    </svg>
                  </div>
                </div> 
                
                <div class="flex text-gray-900"><h1>Are you sur you want to delete ? </h1></div>  
              
                <div class="flex justify-end text-center space-x-1">
                <a  href="/roles" class="bg-gray-300 p-3  text-white  pl-4 flex px-5 py-3 text-sm shadow-sm font-medium rounded-full h-12 hover:shadow-lg" >
                  Cancel
                </a>
                  <form  action="/roles/{{$role->id}}/delete" method="post">
                    @csrf
                    @method('delete')
                  <button class="modal-close  bg-cyan-500 p-3  text-white hover:bg-cyan-700 pl-4 flex px-5 py-3 text-sm shadow-sm font-medium  rounded-full hover:shadow-lg" type="submit">
                      <h2>delete</h2>
                  </button>
                    
                </div>
                
              </div>
              </div>
              </div>
              </form>
              </td>
               </tr>    
              @endforeach   
              <script>
                var openmodal = document.querySelectorAll('.modal-open')
                for (var i = 0; i < openmodal.length; i++) {
                  openmodal[i].addEventListener('click', function(event){
                    
                    event.preventDefault()
                    toggleModal($(this).data('id'))})
                 }
          
                 
                                    
                 const overlay = document.querySelector('.modal-overlay')
                 overlay.addEventListener('click', toggleModal)
                 var closemodal = document.querySelectorAll('.modal-close')
                 for (var i = 0; i < closemodal.length; i++) {
                 closemodal[i].addEventListener('click', toggleModal)
                 }
                 document.onkeydown = function(evt) {
                  evt = evt || window.event
                 var isEscape = false
                  if ("key" in evt) {
                    isEscape = (evt.key === "Escape" || evt.key === "Esc")
                  } else {
                    isEscape = (evt.keyCode === 27)
                  }
                  if (isEscape && document.body.classList.contains('modal-active')) {
                  toggleModal()
                  }
                  };
                  function toggleModal (id) {
                   const body = document.querySelector('body')
                   const modal = document.querySelector('.modal-'+id)
                   modal.classList.toggle('opacity-0')
                   modal.classList.toggle('pointer-events-none')
                   body.classList.toggle('modal-active')
                   }
              </script>