title: jquery Autocomplete feature is not working for newly added Table row-->cell
body: <p>I am trying to use <a href="http://jqueryui.com/autocomplete/" rel="nofollow">http://jqueryui.com/autocomplete/</a>? in HTML table cell. I am adding new rows dynamically by clicking button. But autocomplete is working only for the first row which gets created when page is loaded initially. jquery autocomplete function is not getting called for all newly added rows . How to accomplish this?</p>
  
  <p>HTML Table with Autocomplete script:</p>
  
  <pre><code>    &lt;table id="dataTable" name="dataTable" border="1" WIDTH="50"&gt;
      &lt;col width="40"&gt;
          &lt;tr&gt;
              &lt;th&gt;Prog Filter&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td WIDTH="40"&gt;
                      &lt;input type="text" name="ProgFilter" id="ProgFilter" style="display:table-cell; width:40px" /&gt;
                  &lt;/td&gt;
          &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;script&gt;
      $(function() {
          var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC", ];
          $("#ProgFilter").autocomplete({
              source: availableTags
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Javascript which is adding rows:</p>
  
  <pre><code>     function addRow(tableID){
  var table=document.getElementById(tableID);
  var rowCount=table.rows.length;
  var row=table.insertRow(rowCount);
  var colCount=table.rows[1].cells.length;
  for(var i=0;i&lt;colCount;i++)
  {
  var newcell=row.insertCell(i);
  newcell.innerHTML=table.rows[1].cells[i].innerHTML;
  switch(newcell.childNodes[0].type)
      {
      case"text":newcell.childNodes[0].value="";break;
      }
  }
  }
  </code></pre>