Изменение id элемента вставленного в HTML с помощью js "на ходу"

let countOfFields = 0;
let curFieldNameId = 0;

function addField() {
  countOfFields++;
  curFieldNameId++;
  var div = document.createElement("div");
  div.innerHTML = "<input name='text_' + curFieldNameId + '' type='text' placeholder = 'Имя человека'> <br> <input id='example2' type='range' min='1' max='20' step='1' + curFieldNameId + '' onchange='textbox2.value = example2.value'/> <input id='textbox2' type='text' /> <button onclick='return deleteField(this);' href='#'>-</button>";
  document.getElementById("parentId").appendChild(div);
  return false;
}

<button onclick="return addField()" href="#">+</button>
<div id="parentId">
  <input type="text" placeholder="Имя человека">
  <br>
  <input id="example1" type="range" min="0" max="20" step="1" onchange="textbox1.value = example1.value" />
  <input id="textbox1" type="text" />
  <br>
</div>