使用递增的ID值动态重新创建/克隆表单

How do I create the form dynamically without using the jQuery code as I have done here ? Here, I have manually re-created the subsection-form in the code using $(div).append(). Is there an easier way to clone the subsection-form which is initially as 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>

The problem with clone is that it doesn't produce the incremented IDs.

https://jsfiddle.net/anjanesh/m27pbfns/2/

评论