Почему не работает функция JavaScript?

rockdrop(0);
rockdrop(1);

function rockdrop(Number) {
  for (i = Number; i <= Number; i++) {
    var rockSide = Math.round(Math.random() * (94 - 6) + 6);
    $rockItem = document.createElement('img');
    $gameTwo.insertAdjacentElement("afterbegin", $rockItem);
    $rockItem.setAttribute('id', "rock" + i);
    rockId = document.querySelector('#rock' + i);
    rockId.style.bottom = 575 + 'px';
    rockId.style.left = rockSide + '%';
    $rockItem.setAttribute('src', "./img/rock (1).svg");
    $rockItem.classList.add('rock');
    console.log(rockId);

    function drop() {
      rockId.style.bottom = parseInt(rockId.style.bottom) - 1 + 'px';
      if (parseInt(rockId.style.bottom) <= -53) {
        rockId.remove();
      }
    }
    setInterval(drop, 100);
  }
}

Как сделать что бы функция с новым элементом вызывалась отдельно?

Сейчас срабатывает так: функция вызвана 2 раза с разными параметрами. консоль лог который вы видите показывает все как надо каждая функция с отдельным элементом. но внутренняя функция drop почему-то срабатывает только на самом первом вызове rockdrop(0); Получается так: при запуске создаются два элемента с id rock0 и rock1 но drop(); срабатывает только на элементе rock1; Подскажите что я делаю не так?