title: I want to add a dollar sign currency symbol before the counter in this code
body: <p>I want to add a stationary "$" before the count number at the top. When I have tried anything, it breaks the counter and says "NaNo" I don't know anything about coding though and I am hoping someone can tell me what to add and where exactly to put it in the code block. I want the main numbers at the top to be monetary, to match the information I am adding. I previously added the function that makes it so the numbers are formatted with commas, and maybe need another function? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var a = 0;
  $(window).scroll(function() {
  
    var oTop = $('#counter').offset().top - window.innerHeight;
    if (a == 0 &amp;&amp; $(window).scrollTop() &gt; oTop) {
      $('.counter-value').each(function() {
        var $this = number_format(this),
          countTo = $this.attr('data-count');
        $({
          countNum: $this.text()
        }).animate({
          countNum: countTo
        }, {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
          }
        });
      });
      a = 1;
    }
  });
  
  function number_format(number) {
    var num = number.toLocaleString('en-US', {
      maximumFractionDigits: 0
    })
    return num;
  }
  
  var a = 0;
  $(window).ready(function() {
  
    var oTop = $('#counter').offset().top - window.innerHeight;
    if (a == 0 &amp;&amp; $(window).scrollTop() &gt; oTop) {
      $('.counter-value').each(function() {
        var $this = $(this),
          countTo = $this.attr('data-count');
        $({
          countNum: $this.text()
        }).animate({
          countNum: countTo
        }, {
          duration: 2000,
          easing: 'swing',
          step: function() {
            $this.text(number_format(this.countNum));
          },
          complete: function() {
            $this.text(number_format(this.countNum));
          }
        });
      });
      a = 1;
  
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.counter-value {
    font-size: 80px;
    line-height: 2em;
    text-align: center;
    padding: 17px 0;
  }
  
  .counter-value:after {
    content: attr(data-desc);
    display: block;
    text-transform: none;
    font-size: 16px;
    line-height: 1.2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;div id="counter"&gt;
    &lt;div class="sqs-col sqs-col-4 counter-value" data-count="4172" data-desc="The average American’s 401(k) balance is $104,300 — 
      this amount of money can only be expected to generate $4,172 in 
      sustainable annual retirement income"&gt;0&lt;/div&gt;
    &lt;div class="sqs-col sqs-col-4 counter-value" data-count="1409" data-desc="As of March 2018, the average monthly Social Security 
      payment is $1,409"&gt;0&lt;/div&gt;
    &lt;div class="sqs-col sqs-col-4 counter-value" data-count="40000" data-desc="To live on $40,000 a year after stopping work, you will 
      need savings of about $1.18 million to support a 30-year 
      retirement"&gt;0&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div style="border: 0px solid black"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>