Why <span> tag content does not get update when its data-plugin="counterup" is set

Question

I have following HTML:

<div class="col-6">
    <div class="text-right">
        <h3 class="mt-1">$<span id="ValueCounter" data-plugin="counterup">58,947</span></h3>
        <p class="text-muted mb-1 text-truncate">Total Revenue</p>
    </div>
</div>

I am using Ajax to get actual value from DB and trying to update the same in JQuery ready function as under:

$().ready(function() {
        //alert("JQuery Working");
        //Get data from DB and update the value in Span
        $.ajax({
            url: "ajax_get_customer_bill_total.php",
            type: 'post',
            dataType: "json",
            data: {
                    cust_id:"1",                    
                },
            success: function( data ) {
                    $("#ValueCounter").html(Math.round(data)); //<= this has not effect
            }
        });
});

The value returned from DB does not get set in the span why and how to solve this?

If I set the value/content of span to 0 then the value gets updated. Again why and how to solve this?

<span id="ValueCounter" data-plugin="counterup">0</span>

But then the problem of setting content to 0 is that the value updated using Ajax does not count up. It just appears.