combination problem horizontal menu highlight and arrows navigation

combination problem horizontal menu highlight and arrows navigation

Hey there,

I have an issue in my jquery script. I did menu with button navigation under it. The problem is : when I click on About item on the menu and then I click on the next button I'm not in the good item menu.
For example, if I click on About item and then on the next button I should be on Contact item but it's not the case.
This is my fiddle link :  http://jsfiddle.net/jarod51/drQ79/4/

    1. <div id="cssmenu">
    2. <ul id="list">
    3. <li class='active'><a id="testSlide1" href='#'><span>Home</span></a></li>
    4. <li><a id="testSlide2" href='#'><span>Products</span></a></li>
    5. <li><a id="testSlide3" href='#'><span>About</span></a></li>
    6. <li><a id="testSlide4" href='#'><span>Contact</span></a></li>
    7. </ul>
    8. </div>
    9. <nav class="da-arrows">
    10. <button id="PrevButton">Previous</button>
    11. <button id="NextButton">Next</button>
    12. </nav>
                            There my Jquery script :

                            1. $("a").click(function(){
                            2.   // If this isn't already active
                            3.   if (!$(this).parent().hasClass("active")) {
                            4.     // Remove the class from anything that is active
                            5.     $("li.active").removeClass("active");
                            6.     // And make this active
                            7.     $(this).parent().addClass("active");
                            8.   }
                            9. });

                            11. $('a').click(function(e){
                            12.     e.stopPropagation();
                            13. });

                            15. var list = $("#list");
                            16. var li = list.children();
                            17. var lengthMinusOne = li.length - 1;
                            18. var index = 0;
                            19. var num = $("#list li").length;

                            21. var prevLi = $(li[0]);

                            23. $("#NextButton").click(function(){
                            24.    index++;
                            25.    if (index > lengthMinusOne) index = 0;
                            26.    prevLi.removeClass("active");
                            27.    prevLi = $(li[index]).addClass("active");
                            28. });
                            29. $("#PrevButton").click(function(){
                            30.    index--;
                            31.    if (index < 0) index = lengthMinusOne;
                            32.    prevLi.removeClass("active");
                            33.    prevLi = $(li[index]).addClass("active");
                            34. });