How can I move back and forth within an array?

How can I move back and forth within an array?

I have an array of articles that I want to display. I want to be able to
click on a next-arrow to move to the next article, or a previous-arrow to
move to the previous article. When I get to the last item in the array, I
want to hide the next arrow and vice versa for the first item.
$(function () {
var i = 0
$(multibubbles[i]).appendTo('#page');
$(multibubbles[i]).children('#next-arrow').show();
$(multibubbles[i]).children('#next-arrow').click(function (e) {
$(multibubbles[i]).hide();
i++;
$(multibubbles[i]).appendTo('#page');
if (i == multibubbles.length - 1) {
$(multibubbles[i]).children('#next-arrow').hide();
}
else {
$(multibubbles[i]).children('#next-arrow').show();
}
$(multibubbles[i]).children('#prev-arrow').show();
})
$(multibubbles[i]).children('#prev-arrow').click(function (e) {
$(multibubbles[i]).hide();
i--
$(multibubbles[i]).appendTo('#page');
if (i == 0) {
$(multibubbles[i]).children('#prev-arrow').hide();
}
else {
$(multibubbles[i]).children('#prev-arrow').show();
}
$(multibubbles[i]).children('#next-arrow').show();
})
})
When I click the arrow the first time it goes to the next article fine,
but if I click it again it does nothing because I can't get it to exit the
first click function. I tried using 'return' but that didn't work either.
Please help me.