使用div中的输入元素克隆表单

Question

我想要在按钮点击时克隆一个剃刀形式，这样我就可以获得所有表单字段的唯一ID。如果不将任何输入元素放在div或table中，我能够做到这一点。但是当我这样做时，我没有得到唯一的ID。我尝试了各种解决方案，但似乎没有任何效果。

这是我要克隆的剃刀代码

    <div id="bookingForm" style="display:none; color:#fff;" class="container">
    @{
        int index = 0;
        int hall = 0, slot = 0, requirement = 0;
        <div style="font-family: 'Roboto', sans-serif;margin-bottom:30px;" class="row">
            <div class="col-md-4 col-sm-4 col-4">
                <label><h2>Starting Date</h2></label><br>
            </div>
            <div class="col-md-7 col-sm-7 col-7">
                <input type="date" name="detailsObjList[@index].date" id="date" required onchange="datechosen();" style="width: 100%;" class="form-control start" />
            </div>
            @foreach (var item in ViewBag.HallDetail)
            {
                slot = 0;
                <hr />
                <span id="invalidDate" style="color:indianred;"></span>
                <br />
                <div style="font-family: 'Montserrat', sans-serif;" class="col-4">
                    <input type="hidden" name="detailsObjList[@index].hallsArray[@hall].hallID" value="@(item.hallID)" id="hiddenhall@(hall)_" />
                    <input type="hidden" name="detailsObjList[@index].hallsArray[@hall].hallName" value="@item.hallName" id="hiddenhallname@(hall)_" />
                    <label>@item.hallName :</label>
                </div>
                <div style="align-content: center;" class="col-8">
                    <table class="table table-responsive table-striped">
                        <tbody>
                            <tr>
                                <!--SLOTS-->
                                @foreach (var slotItem in item.slotsArray)
                                {
                                    <th>
                                        <input type="hidden" name="detailsObjList[@index].hallsArray[@hall].slotsArray[@slot].slotID" value="@(slotItem.slotID)" id="hiddenslot@(slot + 1)_@(hall + 1)_" />
                                        <label class="custom-control custom-checkbox" id="lblSlot@(slot+1)_@(hall + 1)_" onmouseover="seeDetails(@(slot+1),@(hall+1))" style="color:#fff;">
                                            <input type="checkbox" class="custom-control-input" data-toggle="tooltip" name="detailsObjList[@index].hallsArray[@hall].slotsArray[@slot].isSelected" id="slotcheck@(slot + 1)_@(hall + 1)_" onchange="slotcheckchange(@(slot + 1), @(hall + 1));" />
                                            <span class="custom-control-indicator"></span><span class="custom-control-description">@slotItem.slot</span>
                                        </label>
                                        <span id="span@(slot+1)_@(hall + 1)_" style="color:indianred;"></span>
                                    </th>
                                    slot = slot + 1;
                                }
                            </tr>
                        </tbody>
                    </table>
                </div>
                hall = hall + 1;
            }
        </div>
        hall = 0;
        slot = 0;
    }
</div>

我克隆此表单

@using (Html.BeginForm("Testing", "BookUtility", FormMethod.Post))
{
    <span id="writeroot"></span>

            <button class="btn btn-success"><i class="fa fa-check-circle" aria-hidden="true"></i>&nbsp;Submit</button>
}

<button id="btnAddMore" class="btn btn-danger" onclick="addMore(@index, @hall, @slot);"><i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;Add more</button>

JavaScript代码：

       var click = 0;
    var addMore = function (index, hall, slot) {
        click = click + 1;

        var newFields = document.getElementById('bookingForm').cloneNode(true);
        newFields.id = '';
        newFields.style.display = '';
        var newField = newFields.childNodes;
        for (var i = 0; i < newField.length; i++) {
            var newId = newField[i].id
            if (newId)
                newField[i].id = newId + click;
        }
        var insertHere = document.getElementById('writeroot');
        insertHere.parentNode.insertBefore(newFields, insertHere);
}