Display Ring on Divi slider module

Question

As Divi doesn't allow modules to be displayed using Divi slider, i tried to come with a workaround. My only issue is that my ring drawing animation doesn't work in the first time the slide is loaded and only fire once and not every time the slide is changed.

Here's the code I came up with:

    $( document ).ready(function() {
            var defaultSlide = document.querySelector('.et_pb_slide_0');
            var defaultCanvas = defaultSlide.querySelector('#ringCanvas'); //pass it as a class
            var dafaultCtx = defaultCanvas.getContext('2d');
            var defaultCanvasCleared = false;
        
            //init values
            var counter = 1;
            var endCount = defaultCanvas.getAttribute("number");
            var goal = defaultCanvas.getAttribute("goal"); // Your goal count
            var interval = 20; // milliseconds
            var ringColor = defaultCanvas.getAttribute("bar_color"); // Default ring color
            var textColor = defaultCanvas.getAttribute("number_color"); // Default text color
            drawRing(dafaultCtx); // Start drawing the ring in the initial container

            var targetNodes = document.querySelectorAll('.et_pb_slide');
            var classNameToCatch = 'et-pb-active-slide';
            var config = { attributes: true, attributeFilter: ['class'], attributeOldValue : true };
            var callback = function(mutationsList, observer) {
                var targetWithClassAdded;
                var targetWithClassRemoved;

                mutationsList.forEach(function(mutation) {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'class'){
                        var currentClassList = mutation.target.classList;
                        var oldValue = mutation.oldValue || '';
                        var classAdded = currentClassList.contains(classNameToCatch);
                        var classRemoved = !currentClassList.contains(classNameToCatch) && oldValue.includes(classNameToCatch);

                        if(classAdded){
                            targetWithClassAdded = mutation.target;
                        }
                        if(classRemoved){
                            targetWithClassRemoved = mutation.target;
                        }
                        
                        targetWithClassAdded != null && workOnClassAdd(targetWithClassAdded);
                        targetWithClassRemoved != null && workOnClassRemoval(targetWithClassRemoved);
                    }
                });
                    
            };

            // Create an observer instance linked to the callback function
            var observer = new MutationObserver(callback);

            // Start observing each target node for configured mutations
            targetNodes.forEach(function(targetNode) {
                observer.observe(targetNode, config);
            });

            function workOnClassAdd(target) {
                var currentCanvas = target.querySelector("#ringCanvas")
                // Check if default canvas has been cleared before
                if(!defaultCanvasCleared) {
                    clearCanvas(defaultCanvas);
                    defaultCanvasCleared = true;
                }
                
                displayRing(currentCanvas)
            }

            function workOnClassRemoval(target) {
                var currentCanvas= target.querySelector("#ringCanvas")
                //currentCanvasId = document.getElementById(target.id).children[0].id;
                clearCanvas(currentCanvas);
            }

            function displayRing(canvas) {
                var ctx = canvas.getContext('2d');
                endCount = canvas.getAttribute("number");
                goal = canvas.getAttribute("goal");
                ringColor = canvas.getAttribute("bar_color");
                textColor = canvas.getAttribute("number_color");
                counter = 1; // Reset counter
                drawRing(ctx);
            }

            function clearCanvas(canvas) {
                var ctx = canvas.getContext('2d');
                counter = 1; // Reset counter
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }

            function drawRing(ctx) {
                var x = ctx.canvas.width / 2;
                var y = ctx.canvas.height / 2;
                var radius = 70;

                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

                // Calculate percentage
                var percentage = (counter / goal) * 100;

                // Draw ring
                ctx.beginPath();
                ctx.arc(x, y, radius, -Math.PI / 2, (2 * Math.PI * (percentage / 100)) - (Math.PI / 2));
                ctx.strokeStyle = ringColor;
                ctx.lineWidth = 20;
                ctx.lineCap = "round";
                ctx.stroke();

                // Draw counter
                ctx.font = '20px Montserrat';
                ctx.textAlign = 'center';
                ctx.fillStyle = textColor;
                ctx.fillText(counter + '€', x, y + 7); // Add the € symbol after the counter text

                // Update counter
                counter++;

                // Check if reached the end count
                if (counter <= endCount) {
                    // Continue counting
                    setTimeout(function() {
                        drawRing(ctx);
                    }, interval);
                }
            }

        });

Want i'm trying to achieve is to have the ring animation on page load and every time the slide is changed. For additional info : Divi handles slide changing with a class "et-pb-active-slide".

If anyones has some tip I'm grateful.