更改Jquery Clone中的复杂ID值

Question

This is my input field

<input class="form-control" id="StudentInstitutes_0__Name" name="StudentInstitutes[0].Name" value="" type="text">

I use clone() to the div wrapping the above input field. That works fine.

But how can I change the id & name index which is "0" in above with the button click.

Ex: if I click button for the first time the input field will be:

<input class="form-control" id="StudentInstitutes_1__Name" name="StudentInstitutes[1].Name" value="" type="text">

This is my button

<div class="form-group">
    <div class="col-sm-6">
        <input type="button" name="ShowMoreInstitution" id="ShowMore" value="Add More Institution" onclick="javascript:  showMoreInstitution();" />
    </div>                                       
</div>

This is my JS

$("#showMore").click(function () {
    $('#showInstitute').clone().insertAfter("#showInstitute");
});

Note that I am using Asp.net Mvc Razor view and don't want to use partial view for the operation.

Answer 1

As I come to know that you wants to change id dynamically, so you have to first declare global variable "value" and assign initial value to it 0.

$("#showMore").click(function () {
    value++;
    $('#showInstitute').removeAttr('id').attr('id', 'StudentInstitutes_" + value + "__Name');
});

this code may help you.