JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>


<div id="ticker">
  <span class="count counter">16,000+</span>
</div>

JavaScript

$(document).ready(function() {

    $('.count').each(function() {
      const initial = $(this).text()
      const format = formatter(initial)
      $(this).prop('Counter', 0).animate({
        Counter: format.value
      }, {
        duration: 3000,
        easing: 'swing',
        step: function(now) {
          $(this).text(format.revert(Math.ceil(now)));
        }
      });
    });

})

function formatter(str) {
  // const delimeter = '-'
  const char = 'x'
  const template = str.replace(/\d/g, char)
  const value = str.replace(/\D/g, '')

  function revert(val) {
    // need better solution
    const valStr = val.toString()
    let result = ''
    let index = 0
    for (let i = 0; i < template.length; i++) {
      const holder = template[i]
      if (holder === char) {
        result += valStr.slice(index, index + 1)
        index++
      } else {
        result += holder
      }
    }
    return result
  }
  return {
    template: template,
    value: value,
    revert: revert
  }
}