Convert a number result from a calculated field to currency

[DRomano]

Please bear with me as I am not a coder and/or programmer.
I have a working animated counter using some HTML and Javascript.
The counter is functional and does what I need it to do - it counts the field result but the formatting of the result is my issue.
I can't get it to work with a calculated field that's formatted for currency .
Due to this problem I have been trying everything to convert the number format with no success.

I would greatly appreciate any assistance.

Here is the script:

<script>
const getNumber = (counter) => {
    return parseFloat(counter.dataset.countTo);
};
const getSpeed = (counter) => {
    return parseFloat(counter.dataset.duration);
};

const updateTex = (counter, text) => {
    counter.textContent = text;
};

const animate = (counter, countTo, duration) => {
    let startTime = null;

    let currentTime = Date.now();

    const step = (currentTime) => {
        if (!startTime) {
            startTime = currentTime;
        }

        const progress = Math.min((currentTime - startTime) / duration, 1);

        const currentNum = Math.floor(progress * countTo);

        updateTex(counter, currentNum);

        if (progress < 1) {
            window.requestAnimationFrame(step);
        } else {
            window.cancelAnimationFrame(window.requestAnimationFrame(step));
        }
    };

    window.requestAnimationFrame(step);
};

const counters = document.querySelectorAll('.counter');
counters.forEach((counter) => {
    const countTo = getNumber(counter);
    const animationDuration = getSpeed(counter);
  animate(counter, countTo, animationDuration);
});

</script>

 

The HTML:
 

<div class="base_container_1">
<table width="100%" border="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding-left:5px; padding-right: 5px; " width="4%" rowspan="2"><img style="align: middle" src="https://www.erc-recovery.com/ERC/clients12.gif">
</td>
      <td width="96%">
<p class="dashTitle">Total Clients Served:</p>

</td>
    </tr>
    <tr>
      <td><div class="dashNumber"><div data-count-to="[@calcfield:1]" data-duration="3500" class="counter">0</div></div>
</td>
    </tr>
  </tbody>
</table>
</div>

<div class="base_container_2">
<table width="100%" border="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding-left:5px; padding-right: 5px; " width="4%" rowspan="2"><img style="align: middle" src="https://www.erc-recovery.com/ERC/bank3.gif">
</td>
      <td width="96%">
<p class="dashTitle">Approved Funding:</p>

</td>
    </tr>
    <tr>
      <td><div class="dashNumber"><div data-count-to="[@calcfield:3]" data-duration="3500" class="counter">0</div></div>
</td>
    </tr>
  </tbody>
</table>
</div>

<div class="base_container_3">
<table width="100%" border="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding-left:5px; padding-right: 5px; " width="4%" rowspan="2"><img style="align: middle" src="https://www.erc-recovery.com/ERC/deals3.gif">
</td>
      <td width="96%">
<p class="dashTitle">Wealth Revenue:</p>

</td>
    </tr>
    <tr>
      <td><div class="dashNumber"><div data-count-to="[@calcfield:2]" data-duration="3500" class="counter">0</div></div>
</td>
    </tr>
  </tbody>
</table>
</div>

<table style = "display:none;"> <tr> <td>

 

The Result:

 

	Total Clients Served:
	111

	Approved Funding:
	12749973

	Wealth Revenue:
	566083

 

 

Here's What I'm Trying to Achieve:

	Total Clients Served:
	111

	Approved Funding:
	$12,749,973.43

	Wealth Revenue:
	$566,083.42

[DRomano]

Found the solution here for anyone else with the same issue:
https://stackoverflow.com/questions/69227424/javascript-count-up-animation-stops-counting-with-comma