Using jQuery inside a PHP page while using a HTML form - php

Question

Basically, what I'm trying to do is use jQuery UI widgets such as datepicker and selectable inside my page book.php. Inside the page I'm using a HTML form. For some reason, when I try to use datepicker and selectable, it's just not working?? On previous pages I have gotten jQuery to work, but for some reason it won't work on this page!
This is my HTML form:
<form method="post" action="homepage_loggedin_book_andrea.php">
Your appointment ID is:
<?php
$test = mysql_result(mysql_query("SELECT MAX(id) FROM appointments"), 0);
echo $test;
?>
<br>
<p>Please enter the appointment ID: <input type="text" value="<?php echo $result['id']; ?>" name="id"></p>
<p>Date: <input type="text" id="#datepicker" name="slot_date"></p>
<br>
Blue dots are lines when Andrea is unavailable.
<img src="Timetable_andrea.jpg" width="400" height="251" alt=""/><br>
<label for="slot_line" name="slot_line" id="selectable">Select a line</label>
<ol id="selectable" name="slot_line">
<li class="ui-widget-content">Line 1</li>
<li class="ui-widget-content">Line 2</li>
<li class="ui-widget-content">Line 3</li>
<li class="ui-widget-content">Line 4</li>
<li class="ui-widget-content">Line 5</li>
<li class="ui-widget-content">Line 6</li>
<li class="ui-widget-content">Line 7</li>
</ol>
<br>
<br>
<p>Reason for appointment: <input type="text" value="<?php echo $result['reason']; ?>" name="reason" style="width: 300px;"></p>
<div class="form-group">
<button type="submit" class="btn btn-block btn-primary" name="btn-book">Book</button>
</div>
</form>
As you can see, I just the ID datepicker and selectable where I want the jQuery to work. I have the jQuery code on a seperate page (which I have targeted in my this HTML page)
jQuery code:
$(document).ready(function(){
$( "#datepicker" ).datepicker();
$( "#menu" ).selectmenu();
$( "#selectable" ).selectable();
});
All I need to work is the datepicker and selectable in my PHP code? I'm not sure as to why it's not working.. Someone please help!