Как создать форму динамически, без использования кода jQuery, как я это сделал здесь? Здесь я вручную заново создал форму подраздела в коде, используя $(div).append(). Есть ли более простой способ клонировать форму подраздела, которая изначально имеет вид teamMember-0?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{
$("#teamMember-container")
.accordion({
header: "> div > h3",
active:false,
collapsible:true
})
});
var n = 1;
$(document).ready(function()
{
$("#btn-AddTeamMember").on("click", function()
{
var outerDIV = document.createElement("div");
outerDIV.className = "group";
outerDIV.id = "teamMember-" + n;
var ID = document.createElement("input");
ID.setAttribute("type", "hidden");
ID.setAttribute("name", "team[ID][" + n + "]");
ID.setAttribute("id", "ID-" + n);
ID.setAttribute("value", "0");
$(outerDIV).append('<h3 id="h3-name-' + n + '">New Team Member</h3>');
var div = document.createElement("div");
$(outerDIV).append(div);
$(div).append(ID);
$(div).append('<div>' +
'<div>' +
'<label for="tm_Name_' + n + '" class="hidden">Name:</label>' +
'<input type="text" name="team[Name][' + n + ']" id="tm_Name_' + n + '" maxlength="200" placeholder="Name" onblur="javascript:changeName(' + n + ')"/>' +
'</div>' +
'<div style="margin-top:15px">' +
'<label for="tm_Title_' + n + '" class="hidden">Title:</label>' +
'<input type="text" name="team[Title][' + n + ']" id="tm_Title_' + n + '" maxlength="250" placeholder="Title"/>' +
'</div>' +
'<div style="margin-top:15px">' +
'<label for="tm_Background_' + n + '" class="hidden">Background:</label>' +
'<textarea name="team[Background][' + n + ']" id="tm_Background_' + n + '" placeholder="Background"></textarea>' +
'</div>');
$("#teamMember-container").append(outerDIV).accordion("refresh").accordion({active: -1});
n++;
});
});
function changeName(num)
{
var name = $('#tm_Name_' + num).val();
if ($.trim(name) == "") name = "Team Member's Name";
$("#h3-name-" + num).html('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>' + name);
}
</script>
</head>
<body>
<div>
<form action="" method="post">
<fieldset>
<legend>Team Members</legend>
<div id="teamMember-container" style="margin-top:10px">
<div id="teamMember-0" class="group">
<h3 id="h3-name-0">Some Name</h3>
<div>
<input type="hidden" id="ID-0" name="team[ID][0]" value="<?php echo encrypt2($f['team']['ID'][$i]) ?>"/>
<div>
<label for="tm_Name_0">Name:</label>
<input type="text" name="team[Name][0]" id="tm_Name_0" value="" maxlength="200" placeholder="Name" onblur="javascript:changeName(0)"/>
</div>
<div>
<label for="tm_Title_0">Title:</label>
<input type="text" name="team[Title][0]" id="tm_Title_0" value="" maxlength="250" placeholder="Title"/>
</div>
<div>
<label for="tm_Background_0">Background:</label>
<textarea name="team[Background][0]" id="tm_Background_0" placeholder="Background"></textarea>
</div>
</div>
</div>
</div>
<br/>
<a href="javascript:;" id="btn-AddTeamMember">Add Team Member</a>
<button type="submit" id="btn-submit">Save</button>
</fieldset>
</form>
</div>
</body>
</html>
Проблема с клон заключается в том, что он не создает увеличенные идентификаторы.
https://jsfiddle.net/anjanesh/m27pbfns/2/