I want to change label value in clone method in JavaScript

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>

8 thoughts on “I want to change label value in clone method in JavaScript”

Leave a Comment