Record Data To Proper Html Children Elements When Cloning

I have a form in Google sheets where I send dynamic data from the sheet. I loop sheet data and create same number of blocks in a form as number of my headers. I have a first block

Solution 1:

I'd recommend populating the 'master' div with the first element of the array and for the clones start iterating over the array from index 1. We need to make some fundamental changes to your processStats(stats) function. First populate the master:

var firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[0] + ". " + stats.statStats[0];

the following two lines are untouched

var motherDiv = document.getElementById("motherDiv")
  var statRow = document.getElementById("statsample");

Change the for loop to start from 1

for (var i = 1; i < stats.statStats.length; i++) {
  }

Now the for-loop itself needs some changes. These three lines are okay

var statName = stats.statStats[i];
var statNumber = stats.statNumbers[i];
var clonedRow = statRow.cloneNode(true);

What I don't understand is the following

var clonedStatID = motherDiv.getElementsByClassName("statClass")[0].id = "statName" + statNumber

I know you want to give the freshly cloned divs child statClass a unique id with a sequential number but with every iteration of the for-loop this would give the first element in the list the id. Above you already have a variable which holds a reference to the cloned div clonedRow you can also use to access it's children.

So get rid of the line and use this:

clonedRow.getElementsByTagName("h6")[0].innerHTML = statNumber + ". " + statName;

Now just append the div to the parent

motherDiv.appendChild(clonedRow);

Here's a working example - just click 'Run code snippet' to see it in action:

//my google app backend function with data    var numbers = [1, 2, 3]
var stats = ["Валовый доход", "Кол-во клиентов", "Кол-во размещенной рекламы"]

var stats = {

  statNumbers: numbers,
  statStats: stats
}

functionprocessStats(stats) {

  //name first statistic with the last numbervar firstStat = document.getElementById("statName").innerHTML = stats.statNumbers[0] + ". " + stats.statStats[0];

  //mother divvar motherDiv = document.getElementById("motherDiv")

  //sample row to copyvar statRow = document.getElementById("statsample");

  //loop stat namesfor (var i = 1; i < stats.statStats.length; i++) {

    var statName = stats.statStats[i];
    var statNumber = stats.statNumbers[i];
    var clonedRow = statRow.cloneNode(true);
    var rowId = clonedRow.id = "statsample" + i;
    clonedRow.getElementsByTagName("h6")[0].innerHTML = statNumber + ". " + statName;
    var err = document.getElementById("err").innerHTML = motherDiv.children.length
    motherDiv.appendChild(clonedRow);
  }
  return;
}

functionshowError() {
  var err = document.getElementById("err").innerHTML = "There was an error."
}

processStats(stats);

<!--Import Google Icon Font--><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet"><!-- Compiled and minified CSS --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><divid="motherDiv"><!-- mother div --><divclass="row"id="statsample"><divclass=" input-field col s3 #fffde7 yellow lighten-5"><h6id="statName"class="statClass"></h6></div><divclass="input-field col s3"><selectclass="icons browser-default"id="weeksSel4"><optionvalue=""disabledselected>Неделя</option></select></div><divclass="input-field col s2"><inputid="numbers"type="text"class="validate"><labelfor="numbers">Значение</label></div><divclass="input-field col s1.5"><selectclass="icons browser-default"id="measure"><optionvalue=""disabledselected>Ед. изм:</option><optionvalue="">шт.</option><optionvalue="">%</option><optionvalue="">$</option><optionvalue="">руб.</option><optionvalue="">грн.</option></select></div><divclass="input-field col s2.5"><aclass="waves-effect waves-light btn-small #039be5 light-blue darken-1"style="float: right;"id="btn1row"><iclass="material-icons right">send</i>Ввести</a></div></div><!-- row end --></div><!-- mother div end--><divid="err"></div>