javascript - how to add Razor element dynamically with new name and id? -

i have following razor code. need add dynamically on button click in client side.

       <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> 

i have written following script, not working expected. need change name , id of trans_id_# , trans_qty_#. being generated html helper, html.editorfor. below script, can copy new element, not able change id or name.

<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);     }); });