Why do my Waypoints not function properly?

Question

I'm using Waypoints to toggle specific menu items with the "live" class as the user scrolls down the page. Everything is working except the "live" class doesn't toggle off when the next area is reached. For example, where #services-amenities is reached, the #overview menu item (124) still has the "live" class. What do I need to do to have the class toggle off when another section is reached. Here is my code. Thanks for any help.

<script type="text/javascript">
    $(document).ready(function(){

          $('#overview').waypoint(function(direction) {
            $('#menu-item-124').toggleClass('live', direction === 'down');  
          });

          $('#services-amenities').waypoint(function(direction) {
            $('#menu-item-125').toggleClass('live', direction === 'down');  
          });

          $('#destinations').waypoint(function(direction) {
            $('#menu-item-126').toggleClass('live', direction === 'down');  
          });

          $('#exceptional-value').waypoint(function(direction) {
            $('#menu-item-127').toggleClass('live', direction === 'down');  
          });

          $('#sample-usage').waypoint(function(direction) {
            $('#menu-item-128').toggleClass('live', direction === 'down');  
          });

          $('#pricing-license-descriptions').waypoint(function(direction) {
            $('#menu-item-129').toggleClass('live', direction === 'down');  
          });

        });
        </script>

Answer 1

I won't work because you're not using toggle on that particular element (#menu-item-124). Put your menu items into an array or assign them to variables and then reference them.