Trying to make a list with labels for each pagination. Is it possible?

[RELIN-Q]

<section class="product-list">
    <ul class="splide__pagination"></ul>
    <ul class="pagination-list" id="p-list2">
        <li>item1</li>
	<li>item2</li>
	<li>item3</li>
    </ul>
</section>

I am trying to add a class .is-active to the corresponding list item that has the same .is-active class, but I think my problem might be that I have multiple lists like this on one page. Also trying to make all of this work as intended but also make the list items interactive in the same way as the pagination buttons. This is p-list2 but I want each to work separately. Been trying to figure it out all day and was wondering if anyone knows if this is even possible or if there is a simple way to implement this.

Any ideas, help, or input is appreciated.

[RELIN-Q]

document.querySelectorAll(selector + ' .pagination-list li');
	
	paginationItems[0].classList.add('is-active');
	
  splide.on('move', function (newIndex) {
    paginationItems.forEach(item => item.classList.remove('is-active'));
    
    paginationItems[newIndex].classList.add('is-active');
  });

Adding this to my initializeCarousel function helped with the label but now I need to figure out how to link the pagination button to the label so they can both be clicked to navigate.