I am working on my first mobile app and I cannot get the right navbar button to work - jquery-mobile

Question

I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
<!--Safety Home Page Starts Here -->
<div data-role="page" id="safety_home" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topics</li>
<li>Report</li>
</ul></div>
</div>
<div data-role="content" data-theme="c">
<p>Home</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
</div>
<!--Safety Home Page Ends Here -->
<!--Safety Topic Page Starts Here -->
<div data-role="page" id="safety_topic" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topic</li>
<li>Report</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Topics Page Ends Here -->
<!--Safety Incidents Page Starts Here -->
<div data-role="page" id="safety_report" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topics</li>
<li>Report</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Incident Page Ends Here -->

Answer 1

Yeah your second and third page has no closing </div> tag. You may want to try and use validators to help spot issues like this. Here is the type of thing that you see when you run your code through a validator.
Line 38, Column 56: Unclosed element div.
<div data-role="page" id="safety_report" data-theme="c">
Line 20, Column 55: Unclosed element div.
<div data-role="page" id="safety_topic" data-theme="c">
HTML5 Validators
http://validator.w3.org/
http://html5.validator.nu/
I hope this helps.