Javascript изменить значение атрибута firstChild

Проблема: я дублирую div с помощью кнопки. В пределах div находятся части формы:

<form method="post" action="order-opstellen.php">
  <div id="duplicate">
    <input type="hidden" id="counter" value="0">
  </div>
  <input type="button" onclick="duplicate()" value="Add">
  <button type="submit">Send</button>
</form>

Я использую этот скрипт:

<script type="text/javascript">
var i = 0;
var original = document.getElementById('duplicate');
function duplicate() {
  var clone = original.cloneNode(true);
  clone.id = "duplicate" + ++i;
  clone.style.clear = "both";
  original.parentNode.appendChild(clone);
  var tempId = document.getElementById("duplicate" + i);
  tempId.childNodes[0].value=i;
}
</script>

Как вы можете видеть, я пытаюсь изменить значение каждого входа. Добавляя его с 1 каждый раз, когда я дублирую div. Очевидно, что он не работает. Как мне это сделать?

Обновить:

Итак, у меня есть эта первая работа. Теперь мне нужно идти глубже.

<form method="post" action="order-opstellen.php">
  <div id="duplicate">
    <input type="hidden" id="counter" value="0">
    <div class="form-group dispWidth fl">
      <label>Productnaam</label>
        <select class="form-control dispWidth" name="productnaam"> <?php
         $sql_products  =   "SELECT * FROM product ORDER BY naam";
         $results   =   $conn->query($sql_products)->fetchAll(PDO::FETCH_OBJ);
         foreach    ($results   as  $row)   {
         ?>
          <option value="<?=    $row->productnr ?>"><?= $row->naam  ?></option>
          <?php }
          ?>
        </select>
    </div>
<div class="form-group dispWidth fl ml">
  <label>Aantal</label>
  <input type="text" name=amountCount class="form-control dispWidth" placeholder="Hoeveelheid">
</div>
</form>

Я хочу, чтобы каждый раз, когда я дублировал div, имя-выбор должен быть уникальным. Также имя последнего ввода должно быть уникальным (amountCount). Вероятно, сопоставляя переменную я за ними как (productnaam1, productnaam2, amountCount1.). Как?!