Funkcja .each - nie dziala dla wszystkich div

W kodzie strony

       <div class="row">
                            <div class="circle col-md-2 col-md-offset-1">
                                <div class="Statistic_box Staffinview1  delay1s">
                                    <div class="ST_num">
                                        <div class="count_stop">
                                                <?php echo $pilots; ?>                                    
                                        </div>
                                    </div>
                                    <?php echo NUMPILOTS; ?>
                                </div>
                            </div>
                                        
                            <div class="circle col-md-2">
                                <div class="Statistic_box Staffinview1 delay1_5s">
                                    <div class="ST_num">  
                                        <div class="count_stop">
                                            <?php echo $planes; ?>
                                        </div>
                                    </div>
                                    <?php echo NUMPLANES; ?>
                                </div>
                            </div> 
                                
                             <div class="circle col-md-2">
                                 <div class="Statistic_box Staffinview2">
                                    <div class="ST_num">  
                                        <div class="count_stop"> 
                                            <?php echo $routes; ?>
                                        </div>
                                    </div>
                                    <?php echo NUMROUTES; ?>
                                </div>
                            </div>     
                                 
                            <div class="circle col-md-2">
                                <div class="Statistic_box Staffinview1 delay1_5s">
                                    <img src="" class="img-responsive" >
                                    <div class="ST_num">
                                        <div class="countdecimal_stop">
                                          <?php echo $hours; ?> 
                                        </div>
                                    </div>
                                    <?php echo VAHOURS; ?>
                                </div>
                            </div>
                                
                            <div class="circle col-md-2">
                                <div class="Statistic_box Staffinview1 delay1s">
                                    <div class="ST_num">  
                                        <div class="count_stop"> 
                                            <?php echo $flights; ?>
                                        </div>
                                    </div>
                                    <?php echo NUMFLIGHTS; ?>
                                </div>
                            </div>
                    
                           
                </div> 

mam zdefiniowane następujące wartości jak liczba: pilots, planes, hours, flights
będące wartościami całkowitymi oraz liczba godzin będąca wartością do setnych po przecinku.

skryptem:

<script>

    var $animation_elements_3 = $('.count_stop');
    var $animation_elements_4 = $('.countdecimal_stop');
    var $window = $(window);
    var done = false;
    var donedec = false;
    
    function check_if_in_view() {
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);    
   
      
      $.each($animation_elements_3, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);
        

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
            $element.addClass('count_start'); 
            
            if((done === false)){
                done = true;
                counting();
            }
                else {
                };
          } else {
          $element.removeClass('count_start');
          done = false;
        }
      });
      
      $.each($animation_elements_4, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
            $element.addClass('countdecimal_start');
            if((donedec === false)){
                donedec = true;
                countingdecimal();
            }
                else {
                };
          
        } else {
          $element.removeClass('countdecimal_start');
          donedec = false;
        }
      });      
    }

    $window.on('scroll resize', check_if_in_view);
    $window.trigger('scroll');


</script>

 

sprawdzam czy element jest w oknie przeglądarki - jeśli tak dodawana jest klasa countdecimal_start i count_start

dodatkowo wywoływana jest funkcja odliczając

<script>    

function counting() {
$('.count_start').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 3000,
    easing: 'swing',
    step: function () {
    $this.text(Math.ceil(this.Counter));
    //$this.text(this.Counter.toFixed(2));
    }
  });
});
}

function countingdecimal() {
$('.countdecimal_start').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 3000,
    easing: 'swing',
    step: function () {
    //$this.text(Math.ceil(this.Counter));
    $this.text(this.Counter.toFixed(2));
    }
  });
});
}
</script>

Niestety efekt jest teraz taki iż odpala się tylko tylko element odliczający pilots i hours z racji ze maja osobna funkcje.
Niestety funkcja pomimo kodu $('.count_start').each(function () ... nie odpala pozostałych div'ow ...

Może mi ktoś pomoc to wyjaśnić?

Masz

var done = false;
A potem zaraz po dodaniu klasy:
$element.addClass('count_start');

Wpada tutaj:

            if((done === false)){
                done = true;
                counting();
            }

• done jest false ? Jest!

Więc ruszy na counting();

A counting znajdzie tylko jednego **diva **(bo dopiero raz była klasa **count_start **dodana).

Czyli funkcja counting() jest wywoływana zanim wszystkie klasy zostaną dodane.

A możesz mi podpowiedzieć jak wywołać funkcje lub jak zmodyfikować kod - by funkcja counting() została wywołane dopiero po ustawianiu wszystkich klas .countstart....

Nie mam koncepcji :(