I want to add dollar signs, thousand/million comma separators, and suffixes in this code

38
October 17, 2019, at 10:10 AM

For our Squarespace website, I have this code for counters that increase up to pre-defined numbers as the user scrolls. There are six counters, and I need to add (1) thousands/millions comma separators (when I put the commas in the counters return “NaNo”, and (2) to have $ dollar signs before the second and sixth counter, and (3) different suffixes for some of the counters (for the first, “Square Feet,” second no suffix, third “Years”, fourth “Tons”, fifth “Autos” and sixth no suffix). I know absolutely nothing about coding.

<div class="counter-container">
<div id="counterbox">
<div class="counter one" data-count="52584987">0</div>
</div>
<div id="counterbox">
<div class="counter two" data-count="18943555">0</div>
</div>
<div id="counterbox">
    <div class="counter three" data-count="2.1">0</div>
</div>
<div id="counterbox">
<div class="counter four" data-count="943110">0</div>
</div>
<div id="counterbox">
<div class="counter five" data-count="10535">0</div>
</div>
<div id="counterbox">
<div class="counter six" data-count="14825676">0</div>
</div>
</div

The numbers count up to the pre-defined numbers just fine, but have no thousand/million separators, and I need suffixes and dollar signs for specific counters as described above.

READ ALSO
How to divide one row in various?

How to divide one row in various?

I have a column data in a postgresql table that receive data like this: |A|C|F|L|T|U|

38
Making div element dynamic with another function

Making div element dynamic with another function

I have a block of code that I want to try and refactor

28
resize svg wrapped in div that is wrapped in div

resize svg wrapped in div that is wrapped in div

I'm having a problem coverting inline SVG to be wrapped in divsI was using nested SVGs before and now I'm told I have to use nested divs with inline SVG

6