JSFiddle - React, Tailwind, and code Playground
HTML
<form id="demo" method="post" action="">
<fieldset id="transactionField">
<div class="maindiv" id="1">
<input class="_fund" name="_fund" id="1_fund"
size="25"/>
</div>
</fieldset>
<!-- This is the template for adding extra rows -->
<div class="maindiv hide_element" id="template">
<input class="_fund" name="_fund" id="_fund"
size="25"/>
</div>
<p>
<input type="button" id="addTransaction"
value="Add Another Trade"></input>
</p>
<p>
<input class="button" type="submit" value="Submit"/>
</p>
</form>
JavaScript
var current = 1;
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function initMainControls() {
$("#1_fund").autocomplete({
source: availableTags
});
}
function initTemplateControls() {
$("#_fund").autocomplete({
source: availableTags
});
}
function reindexControls() {
$("#_fund").attr("id", current + "_fund")
}
var addTransaction = function () {
current++;
$addTransaction = $("#template").clone(true, true);
$addTransaction.attr("id", current)
$addTransaction.removeClass("hide_element");
$addTransaction.appendTo("#transactionField");
reindexControls();
}
$(document).ready(function () {
initMainControls();
initTemplateControls();
$("#addTransaction").live("click", addTransaction);
});