Создать динамическое текстовое поле id

Question

Я хочу создать динамический идентификатор текстового поля при нажатии кнопки кнопки с помощью jquery. Я создал функцию, которая создает три текстовых поля, когда я нажимаю кнопку. Я требую, чтобы каждое текстовое поле имело уникальный идентификатор.

Вот функция: -

function CreateTextBox(value) { 
    return '<div class="col-md-12"><div class="col-md-3"><label>Ingredients</label><input class="form-control"name = "text1" id="ring" type="text" value = "' + value + '" />&nbsp;</div>'+ 
    '<div class="col-md-3"><label>Quantity</label><input class="form-control"name = "text2" type="text" id="rqty" value = "' + value + '" />&nbsp;</div>'+ 
    '<div class="col-md-3"><label>Measure Unit</label><input class="form-control"name = "text3" id="runit" type="text" value = "' + value + '" />&nbsp;</div>'+ 
    '<div class="col-md-3"><input type="button" value="Remove" class="btn btn-info remove" id="rm"/></div></div>' 

} 

Этот код отлично работает для меня в первый раз. Когда я запускаю эту функцию во второй раз, мне нужен другой идентификатор (например, ring1, rqty1, runit1)

Answer 1

Вы должны сделать какое-то значение приращения, чтобы отслеживать, сколько раз кнопка была нажата (скажем, что-то вроде var round = 0;). Затем каждый раз, когда вы добавляете входы, вы можете иметь идентификаторы вида 'id="rqty'+ round+ '"'.

Answer 2

вы можете добавить класс к созданному родительскому DIV (например <div class="col-md-12 createdBoxes">), а затем в функции вы получите число их с помощью:

var number=$('.createdBoxes').length+1; 

, а затем добавить этот номер в динамически созданном поле идентификатора поэтому каждый идентификатор будет равен id="qty'+number+'", и при каждом вызове функции длина будет увеличиваться, поэтому у вас будет индекс числа динамически создаваемых div.