Counterup JS to work According to Counter JsInclude

&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery.counterup.min.js"&gt;&lt;/script&gt;


(I've defined the library in the theme.libraries.yml and attached the library in the theme.info.yml and it shows in the header) 

statcounter:
 version: 8.x-1.0
js:
 scripts/jquery.counterup.min.js: { minified: true }
dependencies:
 - core/jquery




HTML

&lt;span class="counter"&gt;1,234,567.00&lt;/span&gt;
&lt;span&gt;$&lt;/span&gt;&lt;span class="counter"&gt;1.99&lt;/span&gt;
&lt;span class="counter"&gt;12345&lt;/span&gt;


(Have added this in a block in the front page and the markup is displayed)

jQuery

$('.counter').counterUp(); **or with extra parameters**
$('.counter').counterUp({
delay: 10,
time: 1000
});


(Have placed the jquery in a separate custom js; and defined it in the theme, the js is loaded and no errors till now)

   custom:
    version: 8.x-1.0
   js:
    scripts/custom.js: {}


I want to attach the last bit of jquery to the theme and make the counter work...Any ideas how to get it to work? Thanks.
Make sure all files are present !

The drupal way for custom js in your theme is a behavoir, so your js file should look like this:

    (function ($) {
      Drupal.behaviors.myThemeBehavior = {
        attach: function (context, settings) {
           $(context).find('.counter').once('myThemeCounter').counterUp({
             delay: 10,
             time: 1000
           });  
        }
      };
    })(jQuery);


This will ensure the script is executed after the DOM is loaded and only will run once.