JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<table id="table" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>
      <input class="auto" type="textbox" />
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>
      <input class="auto" type="textbox" />
    </td>
  </tr>
</table>
<input type="button" id="button" value="add" />

JavaScript

var datas = [
    "aa",
    "aaa",
    "bb",
    "bbbb",
    "cc",
    "ccc",
  ];

  function addRow() {
    var line = ' <tr>';
    line += ' <td>XXX</td>';
    line += '  <td>XXX</td> ';
    line += '  <td><input class="auto" type="textbox"/></td> ';
    line += ' </tr> ';
    $("#table").append(line);
    console.log($("#table").last("input"));
    $("#table").find("input").last().autocomplete({
      source: datas
    });
  }

  $(".auto").autocomplete({
    source: datas
  });

  $("#button").click(function(e) {
    addRow();
  });