My Javascript functions aren't working when adding more than 9 elements

My Javascript functions aren't working when adding more than 9 elements

I have this page developed for listing people out. When you click on their
names I have another section built out to hold the content of that
individual. It has been working fine, but now I have a need to add more
than 9 people to the list.
When Adding the 10th element you can no longer click the name on the left
and load the correct persons information. It is selected and jumps to the
#1 element. I have provided the code below and a link to the page on
https://github.com/supasmo/Management-Testing.
I need help with correcting this problem so it can take on as many people
as I need to add to the list. Thanks in Advance for any suggestions.
JS
management = {
debug: true,
defaultItem: 1,
currentItem: 0,
bios: ".bios .bio",
bio: "#bio",
manager: ".managers div.bio",
managerLinks: ".managers a",
topLinks: ".bio a.top",
paging: ".bio .paging",
bioNames: ".bio h1",
yellowArrowSrc: "public/assets/common/arrow-link.png",
blueArrowSrc: "public/assets/common/arrow-link-blue.png",
init: function() {
this.log("management.init()");
// count bios
this.bioCount = $(this.bios).length;
this.log("Found " + this.bioCount + " bios.");
// hide bios, names and "top" links, show paging links
$(this.bios).hide();
$(this.topLinks).hide();
$(this.bioNames).hide();
$(this.paging).show();
// show default item
this.showItem(this.defaultItem);
// adjust bio links
$(this.managerLinks).click(function(e) {
e.preventDefault();
management.linkClick($(this).parent());
});
// enable next and prev clicks
$(this.paging + " .next").css("cursor", "pointer").click(function() {
management.nextClick();
});
$(this.paging + " .prev").css("cursor", "pointer").click(function() {
management.prevClick();
});
},
prevClick: function() {
this.log("prevClick()");
newItem = this.currentItem - 1;
if (newItem < 1) {
newItem = this.bioCount;
}
this.showItem(newItem);
},
nextClick: function() {
this.log("nextClick()");
newItem = this.currentItem + 1;
if (newItem > this.bioCount) {
newItem = 1;
}
this.showItem(newItem);
},
linkClick: function(which) {
this.showItem(which.attr("class").substr(3, 1));
},
showItem: function(which) {
this.log("showItem(" + which + ")");
if (which == this.currentItem) {
this.log("--> aborted: item is already showing");
} else {
$(this.bio + this.currentItem).hide();
$(this.bio + which).show();
$(this.manager).removeClass("current");
$(this.manager + which).addClass("current");
$(this.manager + " img.arrow").attr("src", this.yellowArrowSrc);
$(this.manager + which + " img.arrow").attr("src",
this.blueArrowSrc);
this.currentItem = which;
}
},
log: function(message) {
if (this.debug) {
console.log(message);
}
},
// ===== End of Object =====
endOfObject: 1
}
$(document).ready(function() {
management.init();
});