How can I hide sold out opiton values/variants ?

[shortysbrinkg]

I am struggling to hide the sold out variants/option values. Does someone know how to do it ? This is the code of my productpage so far. 

<div class="product-page-wrapper">

    <div class="product-images">
        {% for image in product.images %}
            <img src="{{ image | image_url: master }}" alt="">
        {% endfor %}

        {% for media in product.media %}
            {% if media.media_type == 'video' %}
              {{ media |  video_tag: autoplay: true, loop: true, muted: true, controls: true  }}
            {% endif %}
          {% endfor %}
    </div>
        
    

    <div class="product-info">
        <div class="product-title-wrapper">
            <h1>{{ product.title }}</h1>
            <p class="product-page-price">{{product.price | money }}</p>
            <p class="mwst">inkl. MwSt</p>
            {% if product.available == false %}
                {% if product.type == 'comming soon' %}
                    <p class="comming-soon">comming soon!</p>
                {% else %}
                <p class="sold-out">sold out!</p>
                {% endif %}
            {% endif %}
        </div>



        {% if product.available %}
        <div class="product-page-selection">

            {% form 'product', product %}

                <input id="product-id" type="hidden" name="id" value=" {{ product.selected_or_first_available_variant.id }} ">

    
                <div class="product-option">

                    {% for option in product.options_with_values %}
                        <fieldset>
                            <legend>{{ option.name }}</legend>
                            {% for value in option.values %}
                                
                                    <div class="radio-wrapper">
                                        <input 
                                            type="radio" 
                                            name="{{ option.name }}" 
                                            value="{{ value }}"
                                            id="{{ option.name | handlize }}-{{ value | handlize }}"
                                        >
                                        <label id="size-label" for="{{ option.name | handlize }}-{{ value | handlize }}">
                                            {{ value }}
                                        </label>
                                    </div>
                            
                        {% endfor %}
                        </fieldset>
                    {% endfor %}
                    
                </div>
        
                <div class="button-wrapper">
                    <div class="button-1" id="add-to-cart-button">
                        <button type="submit">
                            Add to Cart
                        </button>
                        <p>+</p>
                    </div>
    
                    <div class="button-1">
                        <button type="submit" id="buy-it-now">
                            Zum Checkout
                        </button>
                        <p>$</p>
                    </div>
                </div>
                
            {% endform %}


        </div>
            {% else %}
            {% if product.type == 'comming soon' %}
                <p>Der Artikel ist bald Verfügbar !</p>
            {% else %}
            <p>dieser Artikel ist leider Ausverkauft!</p>
            {% endif %}    
        {% endif %}
        
        
        <div>
            {{ product.description }}
        </div>
    </div>

    
</div>





<script>

document.querySelectorAll('.product-option input[type="radio"]').forEach(radio => {
    radio.addEventListener('change', () => {
        // Find selected options
        let selectedOptions = []

        document.querySelectorAll('.product-option input[type="radio"]:checked').forEach(radio => {
            selectedOptions.push(radio.value)
        })

    
        // Finding matched variants
        let matchedVariant = product.variants.find(variant => {
            let pass = true
            for (let i = 0; i < selectedOptions.length; i++){
                if(selectedOptions.indexOf(variant.options[i]) === -1){
                    pass = false
                    break
                }
            }

            return pass
        })

        // change product form variant id
        document.querySelector('#product-id').value = matchedVariant.id
    })
})



document.querySelectorAll('form[action="/cart/add"]').forEach(form => {
    form.addEventListener('submit',async (e) => {
        e.preventDefault();

    // submit form with ajax
    await fetch("/cart/add", {
        method: "post",
        body: new FormData(form),
    })
    });

    //open pop-up
   

    
});



    const addedPopup = document.querySelector('.added-to-cart-wrapper');
    const addButton = document.getElementById('add-to-cart-button');

        addButton.addEventListener("click", () => {
        addedPopup.classList.add("add-to-cart-button-active");

        setTimeout(()=> {
         addedPopup.classList.remove("add-to-cart-button-active");
      }
      ,4000);

    });




</script>