Использование counterUp и Waypoints для начала подсчета, когда div находится в поле зрения (без зачистки строк)

Question

Я строю блок, который позволяет пользователю вводить цифры и текст в текстовое поле. Я хочу, чтобы числа подсчитывались (без исчезновения строк), и это заканчивалось текстом в текстовом поле.

Например, если пользователь вводит 16, 000 + , то счетчик (когда просматривается родительский div) начнет отсчет (с 0) до 16 000 без удаления запятой и знака + в конце - это то, что в настоящее время происходит в моей демонстрации.

Мой текущий подход:

(function( $ ) {  
    $( document ).ready( function() {

		
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text().replace(/\D/g, '')
        }, {
            duration: 3000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });

    $('.counter').counterUp({
        delay: 10,
        time: 1000
    });
    
/*     var waypoint = new Waypoint({
    element: document.getElementByClassName('count'),
    handler: function(direction) {
    
      $('.count').each(function () {
          $(this).prop('Counter',0).animate({
              Counter: $(this).text().replace(/\D/g, '')
          }, {
              duration: 3000,
              easing: 'swing',
              step: function (now) {
                  $(this).text(Math.ceil(now));
              }
          });
      });
    
      $('.counter').counterUp({
          delay: 10,
          time: 1000
      });
    
    }
      }) */


    // add comma if number gets to thousands range
    function numberWithCommas(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    }); 

})( jQuery );

.gap{
  height: 600px;
  background: lightgrey;
}

span{
  display: block;
  padding: 10px;
}

<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

<div class="gap">Scroll down</div>

<div class="startCount">
  <span class="count counter">0</span>
  <span class="count counter">£0</span>
  <span class="count counter">16,000+</span>
  <span class="count counter">100%</span>
  <span class="count counter">12,000+ sales</span>
</div>

JSНайдите здесь

Текущие проблемы:

• Строки зачищаются. Таким образом, 16 000+ подсчитывается и становится 16 000.
• Счет не начинается, когда отображается .startCount. Просто начинает рассчитывать на загрузку страницы.