Values are not refreshing.

[eyeway1968]

I integrated the progress bar in one page that has many items which are refreshing via Javascript. There is an AJAX call to the database every second and it pulls new values that are assigned to the existing elements. All elements in the page reflect the new values except the progress bar which keeps the initial value when it first loads. I have tried everything but nothing works.
Here is the code :
var progress_bar = jQuery("#progress_bar").radialMultiProgress("init", {
'fill': 25,
'space': 7,
'data': [{
'color': "#fd7e14",
'range': [0, 100],
'font-size': 30
},
{
'color': "#fff",
'range': [0, 100],
'font-size': 10
}

        ]
    });

    (function(clock) {
        var serial_no = $("#serial_no").attr("data-sm-serial");
        
        setInterval(function() {
           
            $.ajax({
                url: "<?php echo base_url('machine_stats') ?>" + "/" + serial_no,
                type: 'get',
                dataType: 'json',
            }).done(function(result) {

                result.boilHeaterState == 1 ? $(".boiling").addClass("on") : $(".boiling").removeClass("on");
                result.mashHeaterState == 1 ? $(".mashing").addClass("on") : $(".mashing").removeClass("on");
                $("#tank1temp").html(result.boilTemp + result.temp_symbol);
                $("#tank2temp").html(result.mashTemp + result.temp_symbol);
                $("#step").html(result.inner_step + " - " + Math.round((result.stepPercent) * 100) + "%");
                $("#step_index").html(parseInt(result.mainStepIndex) + 1 + " / " + result.mainStepLength + " step");
                $("#estimated_time").html("Estimated total time: " + result.total_time);
                $("#estimated_step_time").html("Estimated Step Time: " + result.step_time);
                $("#elapsed_time").html("Elapsed Time: " + result.elapsed_time);
                $(".main-step").each(function(index, element) {
                    element.getAttribute("id") == parseInt(result.mainStepType) ? $(this).removeClass("text-gray").addClass("text-orange bg-light") : $(this).removeClass("text-orange bg-light").addClass("text-gray");
                });
                $(".inner-step").each(function(index, element) {
                    if (element.getAttribute("id") == result.mainStepIndex && element.getAttribute("data-sm-mainIndex") == result.mainStepType) {
                        $(this).addClass("text-green bg-orange");
                    } else {
                        $(this).removeClass('text-green bg-orange');
                    }
                })



                var is_has = (result.status == "Ended" ? " has " : " is ");
                $("#status").html(result.process + is_has + result.status);
                
                clock.radialMultiProgress("to", {
                    "index": 0,
                    "perc": result.totalPercent * 100

                });
                clock.radialMultiProgress("to", {
                    "index": 1,
                    'perc': result.stepPercent * 100

                });

            });
        }, 1000);
    })(progress_bar);
}

When I replace result.totalPercent with Math.random() it works.
It's driving me crazy. What I am doing wrong?
Thanks.