HTML

<ul>
<li id="1">
  <div class="nodes">
    <div class="round"></div>
    <div class="line"></div>
  </div>
  <a href="#1"
    >1</a
  >
</li>
<li id="2">
  <div class="nodes">
    <div class="round"></div>
    <div class="line"></div>
  </div>
  <a href="#2"
    >1</a
  >
</li>
<li id="3">
  <div class="nodes">
    <div class="round"></div>
    <div class="line"></div>
  </div>
  <a href="#3"
    >1</a
  >
</li>
<li id="4">
  <div class="nodes">
    <div class="round"></div>
    <div class="line"></div>
  </div>
  <a href="#4"
    >1</a
  >
</li>
</ul>

Javascript

let $h3= $("article h3");
$(window)
  .scroll(function () {
    let $topCat = $h3.filter(
      (i, el) => $(el).offset().top > $(window).scrollTop() - 70
    );
    if ($topCat.attr("id")) {
      var parrent = $(`.toc ol`).find(`li#${$topCat.attr("id")}`);
      parrent.addClass("active");
var child = $(".toc li")[parrent.index()].id;
      $(`.toc li#${child}`).next().removeClass("active");
    }
    /*
   
    */
  })

  .scroll();

The code above only works once, but when the user scrolls back it doesn’t work

so, this is what I want
please look this

it starts from the li element which contains id #2
I want when starting from ID 2,3 and so on it will provide classes after that until the end.
is this possible, Is there a better and more effective way than my code above?