Adding “Read more” button to categories description

Hello,

I’ve started seo optimisation and I want to add/expand descriptions of product categories. The problem is that descriptions can take large space and you have to scroll to see products/brands (bad ux). Woodmart theme has one setting – to move descriptions to the bottom. However, more user friendly approach would be to add “Read more” button after certain amount of characters/after exceeding certain amount of height. Since your theme currently doesn’t include this feature, I added this code to Woodmart child theme’s functions.php file:

add_action( 'woocommerce_after_main_content', 'woocommerce_after_main_content', 10 ); 
function woocommerce_after_main_content() {
    if ( !is_product_category() ) return;

    ?>
    <script>
        jQuery( function( $ ) {
            $(document).ready(function() {

                //Get current height of the description container
                let curHeight = $("header .term-description").height();

                //Set heigth of the description container
                $("header .term-description").css({
                    "height": "50px", 
                    "overflow": "hidden",
                });

                //Add 'Read more' button
                $("header .term-description").after( "<button class='read-more' style='margin:15px 0;'>Read more</button>" );

                //Set description container back to its original height
                $( "header .read-more" ).on( "click", function() {
                    $("header .term-description").animate({height: curHeight});
                });
            });
        });
    </script>
    <?php
}

However it doesn’t work. If I add vanilla javascript with the same target !is_product_category() it works. What would be possible fix to add “Read more” button?