РЕШЕНО Создавать динамически идентификаторы в форме html при добавлении нового элемента и передавать затем функцию измен ⇐ Jquery

[Anonymous]

У меня есть этот код, и он работает, я могу добавлять новые строки, а также удалять их.
Проблема в том, что когда я выбираю параметр из входного параметра выбора, он меняет два входных параметра. с правильной информацией.
Когда я добавляю новую строку или несколько строк. Я выбираю опцию из ввода выбора (любой созданный ввод выбора) меняет все входы на одну и ту же информацию.
Я решил, что проблема в идентификаторах трех элементов, поэтому новый элементы у них одинаковые идентификаторы. Я попробовал с классом, но та же проблема.
Вот форма:

Код: Выделить всё

Item










Quantity


Box(s)::EA


Box(s)
Each


Del::Row
Remove





Add Row

ADD

Вот код js/jquery:

Код: Выделить всё

// add row
$("#addRow").click(function () {
var html = '';

html += '';

html += '';
html += 'Item';
html += '';
html += '';
html += '';
html += '';
html += '';
html += '';
html += '';

html += '';
html += '';

html += '';
html += 'Quantity';
html += '';
html += '';

html += '';
html += 'Box(s)::EA';
html += '';
html += '';
html += 'Box(s)';
html += 'Each';
html += '';
html += '';

html += '';
html += 'Del::Row'
html += 'Remove';
html += '';

html += '';

$('#newRow').append(html);
});

// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});

$(document.body).on('change', '#mySelect', function() {
// Get the selected option's data attribute value
var itemName = $(this).find('option:selected').data('itemname');
var itemPrice = $(this).find('option:selected').data('itemprice');

// Update the hidden input's value
$('#myItemName').val(itemName);
$('#myItemPrice').val(itemPrice);
});

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


Подробнее здесь: https://stackoverflow.com/questions/790 ... -pass-then