I am integrating the google maps api into my application on the map it has an info window that will display information about a marker / cluster in that location. My problem is that when the map loads and I click on a cluster, the next button only works the first time the info window appears. Once I close the info window and open another info window by clicking on the cluster again, the $('next') click event won't fire. I find this to be odd because both times I am creating and destroying the next link element. What am I doing wrong? jquery's on function isn't working for me. Please help.

You can see a live example at pitchbig.com/people2.php

The code for the next event is in my people2.js file and is about half way down the page.

Code:
$("#next").on("click", function(){
   var toHighlight = $('.first').next().length > 0 ? $('.first').next() : $('#infoWin li').first();
   $(this).fadeOut(100);
   $('.first').fadeOut(100);
   $('.first').delay(100).removeClass('first');
   toHighlight.delay(100).addClass('first');
   $('.first').delay(100).fadeIn(100);
   $(this).delay(100).fadeIn(100);
});