Javascript loop / swap приводит к непреднамеренному повторению одного элемента

Question

Я создал цикл, который заменяет один элемент на следующий.Кажется, он работает нормально, за исключением того, что после каждой последовательности цикла (5 секунд) элемент, помеченный «1», непреднамеренно меняет каждое число вплоть до 5, когда я просто хочу, чтобы оно показало «5».Я хочу отобразить петлю в эффекте замедленного водопада, отсюда и функция setTimout.

Как можно настроить код, чтобы показать плавную замену элементов?

Давайте предположим, что HTML нельзя изменить.

$(document).ready(function() {
  setInterval(function() {
    for (let i = 1; i <= 5; i++) {
      setTimeout(function() {
        var nuFibClass = ".nu-fib-item-".concat(i);
        var nuFibClassNext = ".nu-fib-item-".concat(i + 1);
        swap(nuFibClass, nuFibClassNext);
      }, i * 500);
    }
  }, 5000);

  function swap(a, b) {
    a = $(a);
    b = $(b);
    var tmp = $("<span>").hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nu-fib-item-1">1</div>
<div class="nu-fib-item-2">2</div>
<div class="nu-fib-item-3">3</div>
<div class="nu-fib-item-4">4</div>
<div class="nu-fib-item-5">5</div>

Codepen