分页导致JavaScript事件监听器失效问题求助

我最近碰到个头疼的问题：当通过分页链接切换页面后，JavaScript的事件监听器就失效了！更奇怪的是，只有第一个和最后一个删除按钮还能正常触发监听器，中间的按钮全都不管用了。

我试着在点击分页链接的时候先移除所有事件监听器，之后再重新添加一遍，但折腾了半天还是没解决，效果完全不符合预期。

有没有懂行的朋友能帮我排查下问题出在哪呀？万分感谢！

相关代码 #

JavaScript 代码

document.querySelectorAll('.openModal').forEach(function(button) {
    button.addEventListener('click', function() {
        document.getElementById('modal').classList.remove('hidden');
    });
});

Blade 模板代码

<tbody>
    @foreach ($clients as $client)
        <tr class="border-b border-neutral-200">
            <td class="whitespace-nowrap px-6 py-4">{{ $client->id }}</td>
            <td>{{ $client->name }}</td>
            <td>{{ $client->inn }}</td>
            <td>
                <!-- 此处省略了包含删除按钮或.openModal按钮的剩余内容 -->
            </td>
        </tr>
    @endforeach
</tbody>

备注：内容来源于stack exchange，提问作者Shoshin