передача соответствующих значений текстового поля в функцию, которая имеет тот же идентификатор

Question

У меня есть кнопка «Добавить текстовое поле». При щелчке создается группа элементов HTML, таких как два текстовых поля - «Ввод текста», «Имя файла» и одна кнопка - «Скачать аудиофайл». При нажатии кнопки «Скачать аудиофайл» необходимо ввести данные из соответствующих текстовых полей, таких как «Ввод текста» и «Имя файла», для передачи в функцию start ().

Важно то, что эти текстовые поля добавляются в DOM с помощью innerHTML, поэтому все итерации будут иметь одинаковый идентификатор для текстовых полей и даже для кнопки.

Мой HTML:

<form class="col-sm-12">
<div id="textfields">

                    <div class="form-row">
                        <div class="col-sm-8">
                                <div class="form-group">
                                        <label for="Textarea1">Text Input</label>
                                        <!--
                                        <textarea class="form-control" id="textarea1" rows="10"></textarea>-->
                                        <textarea class='form-control' id='textarea'"+textareaid=1+" rows='10'></textarea>
                                </div>
                        </div>

                        <div class="col-sm-3 ml-auto">
                                <div class="form-row">
                                        <label for="Textarea2">File Name</label>      
                                        <!--                                  
                                        <input type="text" class="form-control" id="filename">-->
                                        <input type='text' class='form-control' id='filename'"+filenameid=1+">
                                </div></br>
                                <div class="form-row text-center">
                                        <div class="col-12">
                                            <button type="button" class="btn btn-primary" onclick="start();">Download audio file</button>
                                        </div>
                                </div>
                        </div>
                    </div>

                </div>

        <button type="button" class="btn btn-primary" onclick="addTextFields();">Add Text field</button>

    </form>

JavaScript для добавления текстовых полей:

var textareaid=2; var filenameid=2;
        function addTextFields(){
            var objTo = document.getElementById('textfields');
            var divtest = document.createElement("div");
            divtest.innerHTML = "<div class='form-row'><div class='col-sm-8'><div class='form-group'><label for='Textarea1'>Text Input</label><textarea class='form-control' id='textarea'"+textareaid+" rows='10'></textarea></div></div><div class='col-sm-3 ml-auto'><div class='form-group'><label for='Textarea2'>File Name</label><input type='text' class='form-control' id='filename'"+filenameid+"></br><div class='form-row text-center'><div class='col-12'><button type='button' class='btn btn-primary' onclick='start();'>Download audio file</button></div></div></div></div></div>";
            objTo.appendChild(divtest);     
               textareaid++;
               filenameid++;
        }  

Запрос API для start ():

'body': {
                            "input": {
                                 "text":document.getElementById("textarea"+textareaid).value,
                            "filename":document.getElementById("filename"+filenameid).value
                            },
                            "voice": {
                                "languageCode": document.getElementById("languages").value,
                                "ssmlGender": document.getElementById("gender").value,
                                "name": document.getElementById("entries").value
                            }                               
                        }

Проблема в том, что при нажатии кнопки из второй группы элементов она по-прежнему берет параметры из первой итерации, а не из второй.

Так выглядят элементы в HTML .

Любые идеи будут полезны.

Answer 1

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

  <script>
var textareaid=2;
function addTextFields(){
            var objTo = document.getElementById('textfields');
            var divtest = document.createElement("div");
            divtest.innerHTML = "<div class='form-row'><div class='col-sm-8'><div class='form-group'><label for='Textarea1'>Text Input</label><textarea class='form-control' id='textarea"+textareaid+"'"+              
            "rows='10'></textarea></div></div><div class='col-sm-3 ml-auto'><div class='form-group'><label for='Textarea2'>File Name</label><input type='text' class='form-control' id='textarea"+textareaid+"></br><div class='form-row text-center'><div class='col-12'><button type='button' class='btn btn-primary' onclick='start();'>Download audio file</button></div></div></div></div></div>";
            objTo.appendChild(divtest);     
               textareaid++;

        }  

</script>