Autocomplete And AppendChild Functions Not Working Together?

I'm trying to create a form that makes use of two Javascript functions.

The form is a table, and when the user begins typing the the 1st row of the table a 2nd row appears. When the user types in the 2nd row a 3rd row appears, and so on. I've created this using appendChild, and it works well.

I also want the fields in the table to make use of autocomplete, so that when the user begins to type, they are shown a list of predictions for what they are typing. I do this by setting the id of an input on the form to be id="autocomplete".

Individually both these functions work. However, when I combine them, the rows that are added to the table do not work with autocomplete - only the rows which appear when the page first loads give predicted options when the user begins to type.

I would be very grateul if someone could explain why the newly added fields don't work with autocomplete, and suggest a solution. The relevant code is below.

PHP Code:

$(document).ready(function() {
$("input#autocomplete").autocomplete(
{        source: "/autocomplete_queries/admin_base_disciplines.php",
delay: 10,

[Code].....