Hey all - I have this nice Waypoint.js scrolling list that when you scroll down and hit a certain percentage from the target (window), it changes the font style and adds an arrow to the list item.
Right now it’s adding the arrow to every item on the way down.
What I would like to know is if there’s a way to say “just one at a time” somehow that would allow the elements to change, but only one at a time (ie: One Arrow at a time). Like "don’t add this class to more than one at a time, and only add it if you remove it from the one before it while scrolling down (I hope that makes sense!)
Here’s my current Pen: https://codepen.io/brittany-golden/pen/byLMqv
I tried to change it to toggleClass with siblings, but it didn’t work because we need to have these list items broken up into separate ULs so they stack correctly on mobile.
Here’s the website where you can see it working with the correct styles and arrows showing: If you scroll down this page to the OUR PROCESS section you’ll see what I’m working on 
https://stable.stable-demos.com/what-we-do/
Thanks for your help!