Javascript prev/next buttons populated from database
<p>I'm trying to use javascript for next and previous buttons that cycle through a list of professors in a database. The code I have works except for one bizarre glitch: when there are over 9 professors (for this example there will be 11 professors), clicking the "previou"s button on Prof2 displays Prof1, Prof10, &amp; Prof11 simultaneously. </p>

<p>Similarly, clicking "next" on the last prof, like Prof11 in this example, displays Prof1, Prof10, &amp; Prof11 simultaneously. Can you spot the error? Is there a simpler way to create these buttons? Thank you in advance.</p>

<pre><code>$.vars = {
counter : 2,
limit : $getUnitFacultyPages.TotalItems,

};

function nextItem() {
$('li','#profs')
.fadeOut('slow')
.filter( function() { return this.id.match('profs' + $.vars.counter); })
.fadeIn('slow');
$.vars.counter == $.vars.limit? $.vars.counter = 1 : $.vars.counter++; 
}

function prevItem() {
$.vars.counter -= 2;

if($.vars.counter == 1){ 
    $.vars.counter = $.vars.limit;
} else if ($.vars.counter &lt; 0){
    $.vars.counter = $.vars.limit -1;
}

nextItem();
}

$("#profs-next").click(function () {
nextItem();
});

$("#profs-prev").click(function () {
prevItem();
});
</code></pre>
