I want to change label value in clone method in JavaScript

Question

I am using JavaScript to clone a row of form by clicking a button. And each time a row is added, the label value of the new row change. I mean the main label is "dependent 2" and in new row it is change to "dependent 3".I do not know how to change the label. here you can see my code. the clone is working but without changing the label:

function myFunction() {
  var elem = document.querySelector('#dependent');
  var clone = elem.cloneNode(true);
  clone.id = "dependent2";
  elem.after(clone);

  var param = document.getElementsByTagName("lable");
  var id = new Array();
  for (i = 2; i < 7; i++) {
    id[i] = param.item(i);
    lable[i].innerHTML = "dependent" + i + 1;
  }
}

<form class="needs-validation" invalidate>
  <div class="form-row">
    <label class="col-4 offset-2 col-form-label">Dependent 1</label>
    <div class="form-group col-4">
      <div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
        <input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
      </div>
    </div>

  </div>
  <div class="form-row" id="dependent">
    <label class="col-4 offset-2 col-form-label">Dependent 2</label>
    <div class="form-group col-4">
      <div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
        <input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
      </div>
    </div>

  </div>

  <button class="quebtn1 mx-auto" type="button" style="width: 150px;border-radius:8px;" onClick="myFunction()">Add Dependents</button>

Answer 1

Apart from the typo (lable / label), you seemed to be over complicating the updating of the label text (why the loop?). This can be done simply:

let nextLabel = 3;
function myFunction() {
  var elem = document.querySelector('#dependent');
  var clone = elem.cloneNode(true);
  clone.id = "dependent"+nextLabel;
  elem.parentElement.insertBefore(clone,elem.parentElement.children[elem.parentElement.length-1]);
  var label = clone.querySelector("label")
  label.innerHTML = "Dependent " + (nextLabel++);
}

<form class="needs-validation" invalidate>
  <div class="form-row">
    <label class="col-4 offset-2 col-form-label">Dependent 1</label>
    <div class="form-group col-4">
      <div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
        <input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
      </div>
    </div>

  </div>
  <div class="form-row" id="dependent">
    <label class="col-4 offset-2 col-form-label">Dependent 2</label>
    <div class="form-group col-4">
      <div class="input-group mx-auto" style="border-radius: 3px;width:100%;">
        <input type="number" class="form-control " id="validationDefault01" style="font-size:15px" placeholder="Age" required>
      </div>
    </div>

  </div>

  <button class="quebtn1 mx-auto" type="button" style="width: 150px;border-radius:8px;" onClick="myFunction()">Add Dependents</button>