js conflict with progress bar

Hi

I want in my blog a progress bar that shows how much of an article I have already read. I have installed a solution (https://www.elegantthemes.com/blog/divi-resources/how-to-build-a-reading-progress-bar-for-your-divi-blog-posts-without-a-plugin) that uses jQuery which seems to collide with WP Glossary –?it works only when I deactivate WP Glossary.

Here’s the code that the progress bar is using:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>

`

Any idea how I can make it work?

Thanks a lot!

PS: the website is not public yet. Since I have a lifetime license I tried the support page here https://support.codeat.co/dashboard but got the message that I don’t have permission …