laravel foreach循环中的Javascript addEventListener问题

<!-- resources/views/example.blade.php -->
<ul id="item-list">
    @foreach ($items as $item)
        <li id="item-{{ $item->id }}">{{ $item->name }}</li>
    @endforeach
</ul>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const items = document.querySelectorAll('#item-list li');
        items.forEach(item => {
            item.addEventListener('click', function() {
                alert('Clicked on item with ID: ' + this.id);
            });
        });
    });
</script>

document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('#item-list li');
    items.forEach(item => {
        item.addEventListener('click', function() {
            alert('Clicked on item with ID: ' + this.id);
        });
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('#item-list li');
    items.forEach(item => {
        item.addEventListener('click', function() {
            alert('Clicked on item with ID: ' + this.id);
        }, { once: true });
    });
});