使用jQuery自动完成功能动态添加行

我有一个带有单行（文本字段）和添加行按钮的表，当用户单击添加行时，它会动态创建另一个包含文本字段的行。此外，我在该文本字段上应用了自动完成。现在，自动完成功能可以正确地处理第一行，但当我添加新行时，它就不起作用了。下面是我的代码，请告诉我哪里错了

添加行功能

function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }

jQuery自动完成功能

$(function() {
        var availableTags = [
            "Apple",
            "Dell",
            "Microsoft",
            "Sony",
        ];
        $( "#product" ).autocomplete({
            source: availableTags
        });
    });

添加带有文本字段的行按钮和表格

<input type="image" src="../images/add.png" onClick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
 <TR>
   <TD> <INPUT type="text" name="product" id="product" /> </TD>
 </TR>
</TABLE>