jquery tab in page node displaying home page

I'm just doing some playing around, tried to add a jquery tab in a page node and having an issue. When I browse to the page the tabs are there but in each tab it displays the home page. Not sure why that is happening, here is the code I have in the Template HTML of the page node. Anybody know why this is happening?

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

$(function() {
$( "#award_tabs" ).tabs();

<div id="award_tabs">
<li><a href="#available">Available</a></li>
<li><a href="#claimed">Claimed</a></li>
<div id="available">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.</p>
<div id="claimed">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p>