My modal just work fine for the first row of the table

Question

can anyone fix that for me really I spend a lot of time trying different solutions never works.

I use a tailwindcss template for the modal and javascript to show it or hide it.

I don't find the solution can anyone fix it, My modal just works fine for the first row of the table and did not work for the rest of rows

 

        
            
                
                    
                        @foreach ($events as $event)

                            
                        @endforeach
    
                        
                        
                            
                                Event Title
                                Description
                                Date
                                Image
                                Status
                                Actions
                            
                        
                        
                                
                                      
                                        {{ $event->title }}
                                    
                                
                                
                                    
                                        {{ $event->description }}
                                    
                                
                                
                                    
                                    {{ $event->date }}
                                    
                                
                                
                                    
                                        
                                    
                                
                                
                                    @if(($event->status)==1)
                                    Active
                                    @else
                                    Pending
                                    @endif
                                    

                                
                                
                                    
                                        
                                        
                                            
                                        
                                        
   
                                        
                                       
                                         
                                            
                                            
                                        
                                     
                                        
                                    
                                
                            
                    
                    {!! $events->links() !!}

                
            
        
    
  

       

 
 

 
   
  
     
       
         
           
             
             
           
           
                    @csrf
                     @method('DELETE')
                    
                      Delete an Event
                      
                        Are you sure you want to delete the event? All of the event data will be permanently removed. This action cannot be undone.

Peppermintology · Answer

Taken directly from the MDN documentation:

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

So regardless of the number of elements you have in your document with a class of delete-btn, using document.querySelector('.delete-btn') will only ever return the first element it finds.

As you want to be able to apply an event listener to all elements with the delete-btn class, what you really want is the querySelectorAll() method.

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

The NodeList returned from calling document.querySelectorAll('.delete-btn'); is a collection (similar concept to an array) which contains all the elements located with the specified selector. As this is a collection and not a single element, you need to iterate over each of the collection elements and attach an eventListener to each iteration.

So applying the above to your use case, you might do:

window.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.delete-btn').forEach((btn) => {
    btn.addEventListener('click', function(evt) {
      toggleModal();
    })
  })
});

An example CodePend for reference.

My modal just work fine for the first row of the table

1 Answers