Multipage template and toggle div

Multipage template and toggle div

I have a multipage template with a settings menu div. Via this settings menu it is possible to navigate to pages within the template.
  1. //html
    <div data-role="page" id="page1">
  2.    <div id="settingsmenu">
  3.          <a href="#page2" clickevent etc> page 2</a>
  4.    </div>
  5. </div>

  6. <div data-role="page" id="page2">
  7.    <div id="settingsmenu">
  8.         <a href="#page1" clickevent etc> page 1</a>
  9.    </div>
  10. </div>

  11. //javascript
  12. $('#settingsmenu').toggle();
The code above is simplified. When I navigate to a new page, the settingsmenu div is being hidden. When I navigate to the second page, the settings menu no longer appears. Jquery is still calling the settingsmenu div from the first page. Any suggestions on how I can address the settingsmenu div inside the page2 div?