PHP and jQuery removing dynamic list item - php

Question

I hope someone will be able to shed some light on why I am having this issue. I have created a basic list that is generated from a MySQL database using a PHP class. I am then trying to use some basic jQuery to remove a list item. I could not get it working for a long time eventually finding that if I moved the jQuery include to the end of the HTML file it works but not with it included at the top of the script as I would normally aim to do. I had thought that the jQuery document ready function should have resolved this but it is not for some reason.
Here is the jQuery (very basic as said):
$(document).ready(function(){
$(".completeButton").click(function(){
$(this).closest('li').remove();
});
});
Here is the HTML page body (notice I have the jQuery include near the end rather than in the header where it does not work and remove the item, it works fine with it here though?):
<?php
session_start();
if(isset($_SESSION['user'])) {
include "header.php";
?>
<h2>Task List</h2>
<?php
include_once "DatabaseConn.php";
include_once "taskList.class.php";
$sql = "SELECT `GV_Employee`.`requests`.`req_ID` , `GV_Employee`.`equipment`.`description` , `GV_Employee`.`employees`.`first_name`, `GV_Employee`.`employees`.`last_name`
FROM requests
RIGHT JOIN equipment
ON requests.eq_ID=equipment.eq_ID
RIGHT JOIN employees
ON requests.emp_ID=employees.emp_ID
ORDER BY requests.req_ID;";
$stmt = $db->prepare($sql);
$stmt->execute();
$results = $stmt->fetchALL();
foreach ($results as $row){
$task[] = new tasklist($row);
}
foreach($task as $item){
echo $item;
}
?>
<script src="tasklist.js"></script>
<?php
}else {
session_destroy();
header("Location: http://dunc2/dylanr/Starters&Leavers/index.php");
//header("Location: http://192.168.0.4/Starters&Leavers/index.php");
exit;
}
?>
Here is the class for the dynamic list:
<?php
class taskList {
private $taskData;
public function __construct($task){
if(is_array($task))
$this->taskData = $task;
}
public function __toString(){
return '<li id="task-'.$this->taskData['req_ID'].'" class="taskList">
<div class="text">'.$this->taskData['first_name'].' '.$this->taskData['last_name'].
' requires: '.$this->taskData['description'].'</div>
<div id="button">
Complete
Priority
</div>
</li>';
}
}
?>
I hope this question makes sense, I tried searching the forum but could not find a topic which covered this exact situation apologies if there is one.
Many thanks
James