WP / AlpineJS / TailwindCSS - dropdown for a list of venues

dropdown.php

<?php 

// component: dropdown
function filter_dropdown( $label, $type , $tax ) { ?>
<div class="relative w-full md:w-auto x-cloak" id="filter_<?php echo $type ;?>" x-data="{ menuListOpen : false }" >
	<button 
		@click.away="menuListOpen = false"
		@click="menuListOpen = ! menuListOpen "
		:class="{ '' : menuListOpen  } "
		class="uppercase cursor-pointer border dropdown-button flex flex-row items-center justify-between self-end mr-0 ml-auto px-4 border-solid border-current h-[42px] w-full md:w-[216px]" 
		id="menu_dropdown_trigger">
			<span 
				x-transition
				class="tracking-[2.2px] text-[11px]"
				x-text="selectedCategories.<?php echo $type ;?>.length == 0 ? '<?php echo $label ;?>' : selectedCategories.<?php echo $type ;?>">
				</span>
			<span :class="{ 'rotate-180' : menuListOpen  }" class="transition-transform duration-250" x-html="$store.icons.arrow"></span>
		</button>
		<ul
			x-cloak
			:class="{ 'opacity-0  pointer-events-none' : !menuListOpen }"
			class="absolute z-40 min-h-[112px] py-2 text-left transition-all filter-list duration-400 w-full md:w-[216px] right-0  mt-0 top-full">

			<li 
				@click.prevent="selectedCategories.<?php echo $type ;?> = []; updateUrl( '<?php echo $type ;?>' , '<?php echo $tax ;?>'  );" 
				:class="{ 'opacity-0' : !menuListOpen }"
				class="py-2 px-4  cursor-pointer uppercase block  duration-400 transition-opacity   " 
			>
				<span class="font-bold underlined-link tracking-[2.2px] text-inherit text-[11px]"><?php echo $label ;?></span>
			</li>

			<?php list_types( $type ) ;?>

		</ul>
</div>
<?php } ;

// get the categories into a list item for filtering
function list_types($tax) { 

    $types = get_terms(array(
        'taxonomy' =>  $tax ,
        'hide_empty' => false
    ));
 
    if (!empty($types) && !is_wp_error($types)) {
        
        foreach ($types as $type) { ?>

			<?php $name =  strtolower( str_replace( "'", "", $type->name ) ) ?>
            
            <li 
                @click.prevent="selectedCategories.<?php echo $tax ; ?> = '<?php echo $name; ?>' ;  updateUrl( '<?php echo $type->slug ;?>',  '<?php echo $tax ;?>'  ); " 
                :class="{ 'opacity-0' : !menuListOpen }"
                class="py-2 px-4 cursor-pointer uppercase block text-primary duration-400 transition-opacity " 
            > 
				<span class="font-bold underlined-link tracking-[2.2px]  text-[11px]"><?php echo $type->name ;?></span>
            </li>

        <?php } 
        
    } else {
        echo 'No venue types found.';
    } 
}