Generate JS variable array through data-set from w

Question

This is the part of a vanilla JS code =

var prices = [100, 536, 2368];

But the above is hardcoded. I want them through an HTML select drop down:

<select class="license_type" name="license_type" id="license_type">
    <option value="license" data-price="500">Single Site License</option>
    <option value="license" data-price="700">5 Site License</option>
    <option value="license" data-price="1400">Developers License</option>
</select>

Here values in the dataset are generated dynamically in woocommerce:

Data sets values will be dynamically generated based on the woocommerce product.

How can we make sure that the array var prices is up to date always dynamically on each product page based on the variable prices?

Update →

There is a connection to this question answered here→ Woocommerce variation dropdown option tag add some dataset

(This is how we are introducing data-set in HTML of options tag)

Finally in browser it will be rendered like this:

Answer 1

    add_action( 'wp_footer', 'webtoffee_product_attr_filter' );

    function webtoffee_product_attr_filter() {
       if ( !is_product() ) {
          return;
       }
       ?>
          add_action('wp_footer', 'webtoffee_checkout_shipping_filter_it_states');

    function webtoffee_checkout_shipping_filter_it_states() {
        if (!is_product()) {
            return;
        }
        ?>

       <script>

        var x = document.getElementById("color");
        var prices = new Array();;
        var i;
        for (i = 0; i < x.length; i++) {
            if(x.options[i].getAttribute('data-custom')){
            prices.push(x.options[i].getAttribute('data-custom'));
        }else{
            prices.push("0");
        }
        };
        console.log(prices);
        </script>

    <?php
}

Try this