Consider the following scenario:
<div id="addNewMenuElementPart2">
Numerous elements with a name attribute are present here.
</div>
<div id="addNewMenuElementPart3Optional"></div>
Additionally, there is a Javascript function that clones all elements within addNewMenuElementPart2 whenever a button inside addNewMenuElementPart3Optional is clicked:
function addMoreItems() {
var button = document.getElementById('addNewMenuElementPart2');
var copy = button.cloneNode(true);
document.getElementById('addNewMenuElementPart3Optional').appendChild(copy);
}
The issue arises when each cloned element retains the same name attribute, hindering the ability to distinguish them in a POST request. One attempt to resolve this was made by adding an iterator to each subsequent element:
n = 1;
function addMoreItems() {
var button = document.getElementById('addNewMenuElementPart2');
var copy = button.cloneNode(true);
copy.setAttribute(name, name + n.toString())
window.alert(copy.name);
document.getElementById('addNewMenuElementPart3Optional').appendChild(copy);
n++;
}
Despite trying various solutions, an error message indicating "InvalidCharacterError: String contains an invalid character" continues to appear. An updated version of the code, though still unsuccessful, is shown below:
n = 1;
function addMoreItems() {
var button = document.getElementById('addNewMenuElementPart2');
var copy = button.cloneNode(true);
var name = button.getAttribute('name');
var copy = button.setAttribute(name, n);
window.alert(copy);
document.getElementById('addNewMenuElementPart3Optional').appendChild(copy);
n++;
}