how do i select the correct .each(function(index) from list ?

how do i select the correct .each(function(index) from list ?

hello.

how do i make it so that if i click on a link it will make the parent index do something ?

http://jsfiddle.net/rickyspires/m6kXR/35/


so i have a list of divs and an empty container

  1. <div id="book">
        <div id="page1" class="page">1</div>
        <div id="page2" class="page">2</div>
        <div id="page3" class="page">3</div>
        <div id="page4" class="page">4</div>
        <div id="page5" class="page">5</div>
    </div>
    <div id="book_nav"></div>







them from that i get 5 links

  1. $('.page').each(function(index){
        $('#book_nav').append('<a class="pagelink">link</a><br/>');
    });


so i get this:

1
2
3
4
5
link
link
link
link
link






now i want to be able to click on the first link and number 1 will change
or click on the second link and the number 2 will change etc....


at the moment if i click on the links i can get it to alert the index number but it starts at 0 . it would also be nice to make that start at 1.

thanks
rick