I am trying to implement the tried and tested method of creating unlimited input fields (replicated below) . My problem is when i click the button to add new fields, the inputs in the already filled input elements carryover to the new form instead of being cloned as blanks. Screenshot of the form

`function moreFields() {
 let counter = 0;
    counter ++;
    let newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    let newField = newFields.childNodes;
    for (let i=0;i<newField.length;i++) {
        let theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    let insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
  
  console.log("more fields worked")
}`

Is there any way to fix this. Thanks