Custom Arrow Buttons Not Working with SplideJS Slider in PHP

Question

I'm trying to integrate custom arrow buttons for navigation in a SplideJS slider within my PHP code. However, the custom buttons don't seem to trigger the slide movement. Here's the relevant part of my code:

<!-- PHP and HTML structure -->
<div class="splide w-100 notes-slider">
    <!-- ... other slider elements ... -->
    <div class="s_btn-wr d-flex">
        <button id="btnPrev" class="splide__arrows--prev splide_prev">
            <!-- SVG for left arrow -->
        </button>
        <button id="btnNext" class="splide__arrows--next splide_next">
            <!-- SVG for right arrow -->
        </button>
    </div>
</div>

<script>
    waitForSplide(() => {
        var splide = new Splide('.notes-slider', {
            // ... Splide options ...
        }).mount();

        document.getElementById('btnNext').addEventListener('click', function () {
            splide.go('>');
            console.log('next');
        });

        document.getElementById('btnPrev').addEventListener('click', function () {
            splide.go('<');
            console.log('prev');
        });

    }, '.notes-slider');
</script>

Problem: When I click on the custom arrow buttons (btnNext and btnPrev), nothing happens. The console doesn't logs 'next' or 'prev' correctly.

I'm not sure if the issue is with how I'm referencing the Splide instance or with the event listeners. How can I fix this so that the custom buttons control the slider as expected?