Css before and after

JavaScript
1

Hello, i am having some issues with jQuery. Here is my codepen: Link.

I have a navbar and links on the right side. I am using .active class on a link to add the “< />” symbols when the link is active or when i am on that section of the webpage.
To add and remove the class i am using jQuery, but i am not doing it corectly, since when i use my code, it just removes the active class. Here is the jQuery code:

// Active link switching
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();
    
    scrollLink.each(function() {
      
      var sectionOffset = $(this.hash).offset().top - 20;
      
      if ( sectionOffset <= scrollbarLocation ) {
        $(this).addClass('active');
        $(this).removeClass('active');
      }
    })
    
  });