Within a DIV, there are two Input Textboxes present.
I am attempting to duplicate the above div, meaning I want two additional textboxes cloned from the original ones.
However, I am encountering challenges when it comes to assigning new IDs and Names to the clonable input textboxes.
<div class="panel" id="MyJuicePanel">
<div class="cloning" id="MyJuicePanel1">
<input type="text" value="" name="juice.apple.poland[0].varietyName" id="juice.apple.poland0.varietyName">
<input type="text" value="" name="juice.apple.sweden[0].varietyName" id="juice.apple.sweden0.varietyName">
When creating a new div, I aim to replace the aforementioned IDs from 0 to 1, 2, 3...n
newElem.find("#"+InputId).attr('name', InputName_New).val('');
An alternative method, which I do not prefer: If I utilize a Class in the input like class="input1", then it becomes easier to assign new IDs. However, I am hesitant to use classes and would rather find elements based on their IDs, change the name to a new one, and subsequently alter the ID based on the new name.
For further clarification, please refer to this fiddle: https://jsfiddle.net/vc6zappq/