Javascript 如何使用新名称和id动态添加Razor元素？

我有以下代码。我需要在客户端动态添加这个按钮

       <div class="form-group" id="transitem" name="transitem">
        <div class="col-md-11" id="tritem" name="tritem">
            @Html.LabelFor(model => model.transaction_item_id, "transaction_item_id", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-3">
                <div id="trans_dd_1" name="trans_dd_1">@Html.DropDownList("transaction_item_id", null, htmlAttributes: new { @class = "form-control", @id = "trans_id_#", @Name = "trans_id_#" })</div>
                @Html.ValidationMessageFor(model => model.transaction_item_id, "", new { @class = "text-danger" })
            </div>


            <div>
                @Html.LabelFor(model => model.transaction_itmQty, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-3">
                    @Html.EditorFor(model => model.transaction_itmQty, new { htmlAttributes = new { @class = "form-control", @id = "trans_qty_#", @Name = "trans_qty_#" } })
                    @Html.ValidationMessageFor(model => model.transaction_itmQty, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="col-md-2"><input type="button" class="btnPlus" value="+" /></div>
        </div>
    </div>

@LabelFor（model=>model.transaction_item_id，“transaction_item_id”，htmlAttributes:new{@class=“control label col-md-2”}）
@DropDownList（“transaction_item_id”，null，htmlAttributes:new{@class=“form control”，@id=“trans_id_35;”，@Name=“trans_id_35;”}）
@Html.ValidationMessageFor（model=>model.transaction_item_id，“，new{@class=“text danger”}）
@LabelFor（model=>model.transaction_itmQty，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.transaction_itmQty，new{htmlAttributes=new{@class=“form control”，@id=“trans_qty_35;”，@Name=“trans_qty_35;”}）
@Html.ValidationMessageFor（model=>model.transaction_itmQty，“，new{@class=“text danger”}）

我已经写了下面的脚本，但它并没有按预期工作。我需要更改trans_id_35;和trans_qty_35;的名称和id。它们由html助手html.editorfor生成。下面是我的脚本，它可以复制新元素，但我无法更改id或名称

<script type="text/javascript">
var itm_cnt = 1;
$(document).ready(function () {
    $(document).on("click", ".btnPlus", function () {

        var new_clone = $('#tritem').clone();
        itm_cnt = itm_cnt + 1;
        var new_name = "trans_id_" + itm_cnt.toString();
        $(new_clone).attr("name", "new_name");

        $('#transitem').append(new_clone);
        window.alert(itm_cnt);
    });
});

var itm_cnt=1；
$（文档）.ready（函数（）{
$（文档）。在（“单击”、“.btnPlus”上，函数（）{
var new_clone=$（'#tritem'）.clone（）；
itm_cnt=itm_cnt+1；
var new_name=“trans_id”+itm_cnt.toString（）；
$（新克隆）.attr（“名称”，“新名称”）；
$（'#transitem'）。追加（新克隆）；
窗口警报（itm_cnt）；
});
});

---

我已经在你的文章中给了你3个链接，告诉你如何做correctly@StephenMuecke那不管用。当然管用。如果对你不管用，那么您的代码中就有一个错误。@ByomkeshBakhsy正如Stephen在上一个问题中所建议的那样，您必须使用BeginCollectionItem-对于该库，您将不会有重复的Id和名称属性：我的意思是，名称没有正确更改。第一个是假的索引器。如何改变这一点呢？我已经给了你3个链接，在你告诉你如何做到这一点correctly@StephenMuecke那不管用。当然管用。如果对你不管用，那么您的代码中就有一个错误。@ByomkeshBakhsy正如Stephen在上一个问题中所建议的那样，您必须使用BeginCollectionItem-对于该库，您将不会有重复的Id和名称属性：我的意思是，名称没有正确更改。第一个是假的索引器。如何改变这一点呢？