title: Autocomplete not working on cloned divs
body: <p>I have included the automcomplete JS as well as the data for the autocomplete</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.autocomplete.min.js"&gt;&lt;/script&gt;
  
  $("#button").click(function(){
    $("#taskform").clone().appendTo("#taskform");
  });
  
  $(function(){
    var staffnames = [
      { value: 'Stephen', data: 's1' },
      { value: 'Klay', data: 's2' },
      { value: 'Draymond', data: 's3' },
      { value: 'Andre', data: 's4' },
      { value: 'Harrison', data: 's5' },
      { value: 'LeBron', data: 's6' },
    ];
  
    $('#staffsearch').autocomplete({
      lookup: staffnames,
    });
  }
  </code></pre>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;form&gt;
    &lt;div id="taskform"&gt;
      &lt;input type="text" class="form-control input-sm font11" placeholder="Staff" name="staff" id="staffsearch" value=""&gt;
    &lt;/div&gt;
    &lt;input type="button" class="btn btn-info input-sm font11 addanother" onlick="duplicate()" id="button" value="Add Another Staff"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The autocomplete works initially. But when I clone it, the cloned div/input's autocomplete does not work, although the original's autocomplete still works.</p>
  
  <p>Probably have to do with the same ID for both the original and cloned input? Not sure how I work around it though.</p>
  
  <p>Any help is very much appreciated.</p>
  
  <p>B</p>