Navigation problems with jQuery. Links only work in one div

I am trying to make a website that only uses one large page with a 3x3 array of divs where the user will only see one div at a time and the jQuery will direct the screen around using links to animate to the required div. I got the idea from this free code page but I would like the links to be inside each div instead of around the outside within their own container.

Right now I have the links working fine on the 'home' div (the central one) with animations all working correctly but when I copy + paste the link code in the html to another div, they refuse to work. I have no idea why because all the divs are identical and the code seemingly has nothing to do with referencing the central div.

The html code goes something along the lines of this (only there are 9 links):

<div id="one" class="elements">
  <div class="block25">
    <span class="go1"><img src="images/go1.png" alt="One"&开发者_如何学JAVAgt;<h4>ONE</h4></span>
  </div>
</div>

While the jQuery is as thus:

$('.go1').click(function(){
     $('#one').click();
     });

$('#one').click(function(){;
    currentId = $('selected').attr('id');
    goId = section[0][0];
    $target = $('div[id=' + goId +']');
    $paneTarget.stop().scrollTo($target, 800, { margin: true } );
    $('div[id=' + currentId +'], div[id=' + goId +']').toggleClass('selected');
});

What am I doing wrong? Any help would be greatly appreciated.

I think it is because your script is referencing the divs ID. IDs are supposed to be unique to the page. So the script would only work with one div because a) it is written to access only one div and b) because IDs are unique.

To fix this, you could do two things:

1. give each div a unique ID and replicate the script as many times as needed (easiest if you are not sure of the code).

2. give the divs the same class and revise the code to be applicable to each class instance.