Error Loading Page...

Error Loading Page...

I would like to book style application.
User will add 'data-role="page' divisions. My script will make a Table of Contents and navigation button.
I made index.html as follows and book.js is as follows. book.js will add ID='Pxx' attribute to each page
and set next id into each button attribute from the last page.
But I run and push button, it shows 'Error Loading Page'.

You can reproduce this issue by just these two files.  I'm afraid, I make something big misunderstanding about JQM.

Can anyone give me suggestion or advice ? 

--- index.html ---
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>Book Test</title>
<link rel="stylesheet" href="./jquery.mobile-1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="./jquery-1.5.min.js"></script>
<script src="./jquery.mobile-1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script src="./book.js"></script>
</head>
<body>

<div data-role="page" data-fullscreen="true" id="cover">
<div data-role="content" style="position:relative;">
<a href="#toc"><img width="320" src="images/a.jpg" /></a>
<div style="position:absolute; top:10px;left:20px;">
<h1>Book Title</h1>
</div>
</div>
</div> <!-- end of page -->

<div data-role="page" data-fullscreen="true" id="toc">
<div data-role="header">
<h1>Table of Contents</h1>
<a  data-role="button" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<ul data-role="listview" id="hlist" ></ul>
</div>
</div> <!-- end of page -->

<div data-role="page" data-fullscreen="true">
<div data-role="header">
<h1>Chapter1</h1>
<a data-role="button" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<p>Once upon a time,</p>
</div>
</div> <!-- end of page -->

<div data-role="page" data-fullscreen="true">
<div data-role="header">
<h1>Chapter2</h1>
<a data-role="button" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<p>There was a wood cutter.</p>
</div>
</div> <!-- end of page -->

<div data-role="page" data-fullscreen="true">
<div data-role="header">
<h1>Final</h1>
<a data-role="button" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<p>They lived happly forever...</p>
</div>
</div> <!-- end of page -->

</body>
</html>
-
--- book.js---
$(document).ready( function(){
/* add id */
count = 1;
var lastp = '';
$this = $("[data-role='page']");
$this.each(function(){
if ( $(this).attr('id') == ''  ) {
$(this).attr('id', 'p' + count);
lastp =$(this).attr('id');
count++;
}
});
/* add href link */
nxtp = '';
$($this.get().reverse()).each(function(){
var page = $(this).attr('id') ;
if ( page == lastp) {
// do nothing. endp
} else {
if ( nxtp =='' ){
nxtp = page; // now to keep
} else {
$('a', this).attr('href', "#"+nxtp);
nxtp = page;
}
}
});

});
--- end of book.js ---