My querySelector is not working i ejs file

JavaScript
1

I made an ejs file that renders a table of contents after taking data from backend.
I want each row to have a button which opens a dialog box when clicked. This functionality is not working when i set up the dialog box and the related javascript.

</thead>
        <tbody>
            <% rows.map((eachData)=> { %>
                <tr>
                    <th><%- eachData.ID %></th>
                    <td><%- eachData.Name %></td>
                    <td><%- eachData.Email %></td>
                    <td><%- eachData.Balance %></td>
                    <td><button id="open" class="button openModal">Transfer Money</button></td>
                </tr>
                <% }) %>

        </tbody>
    </table>
    
    <dialog class="modal" id="modal">
        <h2>Transfer MONEY</h2>
        <input type="Submit" value="Submit">
        <button class="button close">Close</button>
    </dialog>

    <script src="script.js" type="text/javascript"></script>

The related Javascript

const openModal=document.querySelector('.openModal');
const closeModal=document.querySelector('.close');
const modal=document.querySelector('.modal');

openModal.addEventListener('click',()=>{
    modal.showModal();
})
closeModal.addEventListener('click',()=>{
    modal.close();
})
3

I am extremely grateful to you for responding. After a lot of brainstorming i figured out that the problem was that there were a lot of duplicate elements of the same class name .openModal thats why the querySelector() was not working. The quick solution of the problem was to select all elements of the class .openModal using querySelectorAll() and then individually adding eventlistener to each element.

document.querySelectorAll(".openModal").forEach(elem => elem.addEventListener("click",
    () => {
        modal.showModal();
    }));