JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tbody>
<tr class="Template">
<td>
<input id="test_0" name="test_0" class="AutoComplete" type="text"/>
<script type="text/javascript">
var testData = [{ label: "One", value: 1 }, { label: "Two", value: 2 }];
$("#test_0").data("items", testData);
$("#test_0").data("test", "JSM");
</script>
</td>
</tr>
</tbody>
</table>
<br/><br/>
<button id="addButton">Add</button>
CSS
tr.Template
{
display: none;
}
JavaScript
$(document).ready(function ()
{
var textbox = $(".AutoComplete");
makeAutoComplete(textbox);
$("#addButton").click(function ()
{
var attrRegex = /\d+/;
var template = $("tr.Template");
var newRow = template.clone(false);
var newRowIndex = (template.siblings().length + 1);
newRow.insertBefore(template);
newRow.removeClass("Template");
newRow.find("*[id]").each(function ()
{
var element = $(this);
element.attr("id", element.attr("id").replace(attrRegex, newRowIndex));
});
newRow.find("*[name]").each(function ()
{
var element = $(this);
element.attr("name", element.attr("name").replace(attrRegex, newRowIndex));
});
newRow.find(".AutoComplete").each(function ()
{
makeAutoComplete($(this));
});
});
});
function makeAutoComplete(textbox)
{
var items = textbox.data("items");
var test = textbox.data("test");
if (items == null)
{
if (test == "JSM")
alert("ERROR: data.items not copied but data.test was!");
else
alert("ERROR: data.items not copied nor was data.test!");
}
textbox.autocomplete("destroy");
textbox.removeData("autocomplete");
textbox.autocomplete(
{
minLength: 0,
source: items
});
}