Retrive the value of the Active variation of the product and then link it to the "read more" to dynamically change

Question

Here is the code snippet where Only the tab description is attached to the "Read-more". How to make it dynamically change based on the currently active value of the Variation - material selected by the customer:

add_action( 'woocommerce_single_product_summary', 'scroll_to_product_tab', 21 );
  
function scroll_to_product_tab() {
     
    global $post, $product; 
         
    if ( $post->post_content ) {
        
     echo '<p><a class="jump-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>'; 
    }
    ?>
        <script>
        jQuery(document).ready(function($){
            $('a.jump-to-tab').click(function(e){
                e.preventDefault();
                var tabhash = $(this).attr("href");
                var tabli = 'li.' + tabhash.substring(1);
                var tabpanel = '.panel' + tabhash;
                $(".wc-tabs li").each(function() {
                    if ( $(this).hasClass("active") ) {
                        $(this).removeClass("active");
                    }
                });
                $(tabli).addClass("active");
                $(".woocommerce-tabs .panel").css("display","none");
                $(tabpanel).css("display","block");
                $('html,body').animate({scrollTop:$(tabpanel).offset().top -150},'slow'); // Set your offset by changing -150 value
            });
        });
        </script>
    <?php
}

I aim to fetch the selected "Material" variation from the product chosen by the customer and dynamically attach its respective tab to the href. When the customer clicks on "Read more" it will go to that tab's information. Please see the URL for the expanded description: https://youtu.be/f4beq6QJqoQ

I tried to get the value from the "Material" variation.

add_action( 'woocommerce_single_product_summary', 'scroll_to_product_tab', 21 );
  
function scroll_to_product_tab() {
     
    global $post, $product; 
         
    if ( $post->post_content ) {       
        
        $attr = $product->get_attribute( 'material' );  
        if($attr == 'acrylic-glare-free-photo-print-matt')
        {
            echo '<p><a class="jump-to-tab" href="#tab-acrylic-fine-art">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
        }
        else if($attr == 'acrylic-glass-stand')
        {
            echo '<p><a class="jump-to-tab" href="#tab-acrylic-stand">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
        }
        else if($attr == 'direct-print-on-brushed-aluminium-dibond-in-silver')
        {
            echo '<p><a class="jump-to-tab" href="#tab-brushed-alu">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
        }
        else if($attr == 'direct-print-on-forex')
        {
            echo '<p><a class="jump-to-tab" href="#tab-forex">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
        }
        else if($attr == 'fine-art-print-on-aluminum-dibond')
        {
            echo '<p><a class="jump-to-tab" href="#tab-alu-fine-art">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
        }
        else if($attr == 'textile-print-on-stretcher-frame')
        {
            echo '<p><a class="jump-to-tab" href="#tab-textile">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
        }else
        {
            echo '<p><a class="jump-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' →</a>  </p>';
        }
    }
        
    ?>
        <script>
        jQuery(document).ready(function($){
            $('a.jump-to-tab').click(function(e){
                e.preventDefault();
                var tabhash = $(this).attr("href");
                var tabli = 'li.' + tabhash.substring(1);
                var tabpanel = '.panel' + tabhash;
                $(".wc-tabs li").each(function() {
                    if ( $(this).hasClass("active") ) {
                        $(this).removeClass("active");
                    }
                });
                $(tabli).addClass("active");
                $(".woocommerce-tabs .panel").css("display","none");
                $(tabpanel).css("display","block");
                $('html,body').animate({scrollTop:$(tabpanel).offset().top -150},'slow'); // Set your offset by changing -150 value
            });
        });
        </script>
    <?php
}

It seems not to work. There could be a syntax missing that I can not understand