having trouble selecting grouped divs

having trouble selecting grouped divs

hello.

im having trouble selecting selected all divs

i have grouped together some divs and i want it so that when you click on a group of divs it will add a class to each of the divs selected.

i.e

group1 =  1+2
group2 =  3+4
group3 =  5

if i select group 2 divs 3+4 will have the class selected added.


please see my jsfiddle: http://jsfiddle.net/rickyspires/h2kbF/110/


this is the code:

  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="page4" class="page">5</div>
        <div id="page5" class="page">6</div>
    </div>
    <div id="book_nav"></div>








  1. .selected {
        background-color: yellow;
        z-index:1;
    }






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


    // Navigation
    $('#book_nav').find('.pagelink:not(:first-child):even').each(function () {
        $(this)
            .add($(this).next('.pagelink'))
            .wrapAll('<a class="group"></a>');
    });

    $(".pagelink").first().each(function () {
        $(this)
            .wrapAll('<a class="firstPage"></a>');
    });


    // Navigation - onclick group
    $('a.group, a.firstPage').click(function () { //main effect loop

       $('.selected').removeClass('selected');
       $(this).children("*").addClass('selected');
       
       $('.page').removeClass('selected');
       var clickedIndex = $('a.group, a.firstPage').index(this);
       //$('.page').addClass('selected');
       $('.page').removeClass('selected').eq(clickedIndex).addClass('selected');
    });
































thanks