显示变化价格而不是低价格

I am trying to fix this code for hours.

The problem is price field increment or decrement with low available variable price eventhough if i select other prices. It seems to grab only low variable price.

What i want is to show the selected variable price.

When i go through the Woocommerce docs i have found something but i dont know how to implement this in a code.

My Actual code:

add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
global $woocommerce, $product;
// let's setup our divs
echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Product Total:','woocommerce'),'<span class="price1">'.$product->get_price().'</span>');
?>
    <script>
        jQuery(function($){
            var price1 = <?php echo $product->get_price(); ?>,
                currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

            $('[name=quantity]').change(function(){
                if (!(this.value < 1)) {

                    var product_total = parseFloat(price1 * this.value);

                    $('#product_total_price .price1').html( currency + product_total.toFixed(2));

                }
            });
        });
    </script>
<?php

}

Woocommerce Doc in line 317*

https://docs.woocommerce.com/wc-apidocs/source-class-WC_Product_Variable.html#286-326

Do you guys have any idea how to do that .?