Как добавить уникальные идентификаторы в динамически создаваемые поля ввода в Javascript?

Question

Я использую javascript для создания полей ввода динамически с ограничением в 10, разрешенным для моей формы. Что мне нужно сделать, чтобы эти поля были отправлены в нужное место, это дать им правильный идентификатор. Мой вопрос: как мне это сделать?

$(document).ready(function() { 
    var max_fields = 10; //maximum input boxes allowed 
    var wrapper = $(".input_fields_wrap"); //Fields wrapper 
    var add_button = $(".add_field_button"); //Add button ID 
    var x = 1; //initlal text box count 

    var num = new Number; 
    var newNum = num + 1;   

    /*if (x = max_fields) { 
     alert("You can't add anymore fields.") 
    } 
    */ 

    $(add_button).click(function (e) { //on add input button click 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div class="clonedInput"><input id="" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

Было бы неплохо для каждого поля ввода, чтобы иметь идентификатор типа «data_item_1», «data_item_2», «data_item_3» и т.д. и т.п. я не уверен, о том, как сделать это, хотя.

Answer 1

Вы можете использовать глобальную переменную типа x для генерации уникальных идентификаторов. Вы могли бы использовать x, но по мере того, как вы уменьшаете x, вам может понадобиться использовать отдельную переменную.

$(wrapper).append('<div class="clonedInput"><input id="data_item_'+itemIndex+'" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 

Вы код будет как

var itemIndex = 2; 
$(add_button).click(function (e) { //on add input button click 
    e.preventDefault(); 
    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 

      $(wrapper).append('<div class="clonedInput"><input id="data_item_'+ itemIndex++ +'" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box 
    } 
}); 

Answer 2

Попробуйте эту строку в случае щелчка

$(wrapper).append('<div class="clonedInput"><input id="data_item_'+x+'" type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>');