Как применить анимацию чисел при скролле к нескольким блокам?

Question

[Макс Darkleviathan]

Как применить анимацию чисел к нескольким блокам? Сейчас получается только с одним. Вот сам код:

<div class="number" data-max="300">0</div>
<div class="number" data-max="280">0</div>
<div class="number" data-max="95">0</div>

var number = document.querySelector('.number'),
		numberTop = number.getBoundingClientRect().top,
    start = +number.innerHTML, end = +number.dataset.max;

window.addEventListener('scroll', function onScroll() {
		if(window.pageYOffset > numberTop - window.innerHeight / 2) {
    		this.removeEventListener('scroll', onScroll);
        var interval = setInterval(function() {
        		number.innerHTML = ++start;
            if(start == end) {
            		clearInterval(interval);
            }
        }, 5);
    }
});

Answer 1

[0xD34F]

document.querySelectorAll('.number').forEach(number => {
  const top = number.getBoundingClientRect().top;

  window.addEventListener('scroll', function onScroll() {
    if (window.pageYOffset > top - window.innerHeight / 2) {
      this.removeEventListener('scroll', onScroll);
      let start = +number.innerHTML;
      const interval = setInterval(function() {
        number.innerHTML = ++start;
        if (start >= number.dataset.max) {
          clearInterval(interval);
        }
      }, 5);
    }
  });
});