why this simple Userscript not working as I wanted?

I have been trying to make a userscript and I made one for Udemy. It checks the course’s progress and calculates the percentage, then adds the percentage after the progress text. But I don’t understand why it doesn’t work..!!
Note: I’m a total newbie to making a userscript. Although I use many for different purposes.

// @name         Udemy course percentage checker
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Trying to do something new
// @author       You
// @match        https://www.udemy.com/course/The-Course-Name/learn*
// @grant        none

// ==/UserScript==

(function() {
    'use strict';
    // Get the course progress element
    var progress = document.querySelector(".progress-popover-content--container--1SoAL");

    // If the element exists, get the numbers from the text and calculate the percentage
    if (progress) {
        var text = progress.querySelector('[data-purpose="progress-popover-text"]').textContent;
        var numbers = text.match(/d+/g);
        var completed = parseInt(numbers[0]);
        var total = parseInt(numbers[1]);
        var percentage = Math.round(completed / total * 100);

    // Create a new element to show the percentage and append it to the progress element
        var percentageElement = document.createElement('div');
        percentageElement.textContent = percentage + '%';
        percentageElement.className = 'ud-heading-sm';
        progress.appendChild(percentageElement);
    }
})();