Css before and after

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 ) {

The above is adding active and then immediately removing it.

Also, are you sure you understand what $(this) references in the above code?

Also, you need to check out your browser’s console to see many errors showing when you click on links.