Как добавить уникальный идентификатор для нового поля формы?

[javascript_pupil]

<script>
function addField() {
document.getElementById("choice_poll").insertAdjacentHTML('beforeEnd', '<input id="answers" type="text" name="answers" value="">');
}
</script>
<fieldset>
<span class="ad_label">Варианты ответов</span>
<div id="choice">
<div id="choice_poll"><input id="answers[0]" type="text" name="answers" value="">
<input id="answers[1]" type="text" name="answers" value="">
</div><span><a href="#" onclick="addField(); return false;">Добавить поля</a></span></div>
</fieldset>

Есть простенький скрипт, указанный выше. Пользователь может добавить любое необходимое ему количество полей в форму. Проблема заключается в том, что идентификатор должен быть уникальным, а пример выше создаёт поля с одинаковыми идентификаторами.

В качестве примера я подставил в поля input как это должно выглядеть. Например, у нас по-умолчанию есть 2 поля: answers[0] и answers[1], соответственно при нажатии на "Добавить поля" в документе должно появиться answers[2], затем answers[3] и так далее.

Буду признателен за подсказки.

[рони]

javascript_pupil,

function addField() {
let {length : i} = document.querySelectorAll('[name="answers"]');
document.getElementById("choice_poll").insertAdjacentHTML('beforeEnd', `<input id="answers[${i}]" type="text" name="answers" value="">`);
}

[javascript_pupil]

Спасибо, работает!

А в IE 11 не должен работать? Ругается: "addField" не определено. В других браузерах всё норм.

[рони]

javascript_pupil,

function addField() {
let i = document.querySelectorAll('[name="answers"]').length;
document.getElementById("choice_poll").insertAdjacentHTML('beforeEnd', '<input id="answers['+i+']" type="text" name="answers" value="">');
}

[javascript_pupil]

Спасибо! А то я как "старовер" до сих пор им пользуюсь для своих сайтов.