li select

Hej Eksperter

Jeg vil høre om der er nogen der kan hjælpe med at få dette her til at virke.

Jeg har en kode som laver en select boks i css og Jquery, men kan ikke for den til at få den rigtig value når jeg ligger i kurv.
Kan godt tage det sidste id i il select boksen. men ikke den jeg selecter.

Her er koderne:
php kode:

<form class="variation" action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" method="post" enctype='multipart/form-data'>
      <div class="single_variation_wrap">
                <?php
                    /**
                    * woocommerce_before_single_variation Hook.
                    */
                    do_action( 'woocommerce_before_single_variation' );
   
                    /**
                    * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
                    * @since 2.4.0
                    * @hooked woocommerce_single_variation - 10 Empty div for variation data.
                    * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
                    */
                    do_action( 'woocommerce_single_variation' );
   
                    /**
                    * woocommerce_after_single_variation Hook.
                    */
                    do_action( 'woocommerce_after_single_variation' );
                ?>
            </div>
   
            <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
    <?php
$available_variations = $product->get_available_variations();

if( count($available_variations) > 0 ){
?>
    <?php
    $output = '
    <div id="variant" name="variation_id">
    <ul id="variant">
    <li class="init">Vælg størrelse...</li>';
?>
    <?php
    foreach( $available_variations as $variation ){
        if($variation['max_qty'] > 0) {//Finder ud af om der er vare på lager det den kalde variation.
        $option_value = array();
            //Kan finde ud af at få en pris på en variation.
            $variation_id=$variation['variation_id'];
            $variable_product1= new WC_Product_Variation( $variation_id );

            $regular_price = $variable_product1 ->regular_price;
            $sales_price = $variable_product1 ->sale_price;
?>
    <input type="hidden" name="variation_id" value="<?php echo $variation['variation_id']; ?>" />
    <?php
        foreach( $variation['attributes'] as $attribute => $term_slug ){
            $taxonomy = str_replace( 'attribute_', '', $attribute );
            $attribute_name = get_taxonomy( $taxonomy )->labels->singular_name; // Attribute name
            $term_name = get_term_by( 'slug', $term_slug, $taxonomy )->name; // Attribute value term name

            $option_value[] =  $attribute_name.': '.$term_name;
           
        }
        ?>
    <?php
        $option_value = implode( ' | ', $option_value );

        $output .= '
        <li data-value="'.$variation['variation_id'].'">'.$option_value.'</li>';?>
           
        <?php
        }
    }
    $output .= '
        </ul>
        </div>';
?> <?php
    //En if else function til at se om produktet er i variation eller en simpel, hvis den er en variation viser den select. Hvis ikke viser den ikke hvad det er et enkelt produkt.
    if( $product->is_type( 'simple' ) ){
    // No variations to product
} elseif( $product->is_type( 'variable' ) ){
  echo $output;
}
} ?>
    <input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $post->ID ); ?>" />
</form>

Jquery:
jQuery( document ).ready(function() {
jQuery("#variant ul").on("click", ".init", function() {
    jQuery(this).closest("#variant ul").children('li:not(.init)').toggle();
});

var allOptions = jQuery("#variant ul").children('li:not(.init)');
jQuery("#variant ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery("#variant ul").children('.init').html(jQuery(this).html());
    allOptions.toggle();
   
    jQuery("#variant ul").click(function(){
    jQuery('#variant').attr('value', jQuery(this).attr('data-value'));
});
});
    });

CSS:
#variant ul {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 400px;
    border: solid thin lightgray;
    position: relative;
    top: -20px;
    z-index: 9999;
    list-style: none;
    appearance: button;
   
}
#variant ul li {
    position: relative;
    padding: 5px 10px;
    z-index: 9999;
}
#variant ul li:not(.init) {
    position: relative;
    z-index: 9999;
    width: 400px;
    display: none;
    background: lightgray;
}
#variant ul li:not(.init):hover, ul li.selected:not(.init) {
    background: lightgray;
    position: relative;
    z-index: 9999;
}
#variant li.init { cursor: pointer; }

Håber der er nogen der ved hvordan jeg får den valgte "li" til at blive den der kommer i kurven.

Med venlig hilsen
Morten