Dynamically adding and removing HTML classes I am trying to add an active class to my subnavigation using the waypoints jQuery. I am trying to avoid writing multiple functions to adhere to the DRY idea. The waypoints toggle the function based on their location in the markup. Any suggestions welcome.  

Markup

 &lt;!-- top section --&gt;
&lt;!-- waypoint class--&gt;
&lt;a href="#" class="homeNavItem1"&gt;&lt;/a&gt;
&lt;!-- partial for the code --&gt;
&lt;?php include 'partials/homepage/topHero.php'; ?&gt;

&lt;!-- content section one events --&gt;
&lt;!-- waypoint2 class--&gt;    
&lt;a href="#" class="homeNavItem2"&gt;&lt;/a&gt;
&lt;!-- partial for the code --&gt;
&lt;?php include 'partials/homepage/section1.php'; ?&gt;


JavaScript/jQuery 

Backwards way:

$('.homeNavItem1').waypoint(function(direction) {
  $('.homeAnchor1').addClass("subActive");
  $('.homeAnchor2').removeClass("subActive");
  $('.homeAnchor3').removeClass("subActive");
  $('.homeAnchor4').removeClass("subActive");
  $('.homeAnchor5').removeClass("subActive");
});


Efficient code attempt:

function waypointItem(x, y, i) {
  $('.homeNavItem' + x).waypoint(function(direction){
    $('.homeAnchor' + y).addClass("subActive");
    $('.homeAnchor' + i).removeClass("subActive");
  });
}

for (i = 2; i &lt;= 6; i ++){
  waypointItem(1, 1, i);
  console.log(i);
}
A common question,

@elclanrs is right that you probably want a common class for your home anchor tags unless you truly want to style them all differently.

Then you could simply turn off the current active anchor with

$('.homeAnchor.subActive').removeClass("subActive");


Otherwise, you could try and see if this works for you:

$('.subActive').removeClass("subActive");


That assumes that on the whole page you use subActive only for your home anchors of course.