Table with pagination using Livewire and with dropdowns using TailwindCSS

Question

I am pretty new to livewire but so far I have been able to find help online on how to get up and running. However, there is a problem that I have ran into and I can't seem to figure out. I have a table with pagination and each cell has a dropdown button that when clicked, will have edit and delete. For some reason, the dropdown toggle works on the first page but on subsequent pages, the button doesn't trigger the dropdown menu until I refresh the page. Then after I refresh the page, those active cells work but as soon as I click on the next page, again the dropdown doesn't open. Here's my code:

<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">

    <tr class="odd:bg-white hover:bg-gray-50 odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
    
        <td>
            <button id="dropdownActionButton{{ $product->id }}" data-dropdown-toggle="dropdownAction{{ $product->id }}" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
                <span class="sr-only">Show</span>
                Action
                <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                </svg>
            </button>
            
            <!-- Dropdown menu -->
            <div id="dropdownAction{{ $product->id }}" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600">
                <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownActionButton{{ $product->id }}">
                    <li>
                        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Edit</a>
                    </li>
                    <li>
                        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete</a>
                    </li>
                </ul>
            </div> 
            
        </td>
        
    </tr>
    
</table>

as you can see, each cell has it's own id and when I click on the next page, each cell still has it's own id but for some reason, the dropdown menu no longer opens. I want to point out that I'm only using TailwindCss for the css and nothing else. I do, however, use livewire for Laravel. This code is also trimmed. I also copied the dropdown button from TailwindCss's website. I would appreciate if someone would give me a hand.