сохранить поля ввода в sessionStorage для каждого добавления с помощью jquery

Question

У меня есть форма, которая позволяет пользователям динамически добавлять поля для каждого требования проекта.Я хочу сохранить свои данные в localStorage, чтобы заполнить раскрывающийся список на следующей странице.У меня есть каждое заполненное индексированное число, но каждое значение впоследствии заполняется самым первым введенным значением.Любая помощь будет принята с благодарностью.

Обновлен код, который возвращает первые 2 отдельных ввода, но не дополнительные ** *

      $(document).ready(function() {
            var max_fields      = 20; //maximum input boxes allowed
            var wrapper         = $(".moreReqs"); //Fields wrapper
            var add_button      = $(".addReq-btn"); //Add button ID
            // var inputValue      = $
            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
                e.preventDefault();
                if(x < max_fields){ //max input box allowed
                    x++; //text box increment
                      $(wrapper).append('<div class="form-group" id="req_name" name="req_name">' + x + '.{{ newReqs.req_name(class_='form-control', id='reqInput(x)') }}<a href="#" class="remove_field"><i class="fa fa-times-circle fa-fw fa-lg"></i></a></div>');//add input box
                var userInput = document.getElementById("reqInput(x)").value;
sessionStorage.setItem(x, userInput );
                    };
            });
            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                e.preventDefault(); $(this).parent('div').remove(); x--;
            });

        });

ввод данных формы значения формы сохраняются в хранилище

Answer 1

Используя совет Майка Б. Я изменил js, чтобы включить отдельные идентификаторы.Затем я добавил кнопку, которая установит значения в localStorage.Переменные перебираются для отображения на следующей странице.

Добавление отдельных идентификаторов:

$(document).ready(function() {
  var max_fields      = 20; //maximum input boxes allowed
  var wrapper         = $(".moreReqs"); //Fields wrapper
  var add_button      = $(".addReq-btn"); //Add button ID
  var x = 1; //initlal text box count
  $(add_button).click(function(e){ //on add input button click
    e.preventDefault();
      if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div class="form-group" id="req_name" name="req_name">' + x + '.{{ newReqs.req_name(class_='form-control', id="reqInput' + x +'") }}<a href="#" class="remove_field"><i class="fa fa-times-circle fa-fw fa-lg"></i></a></div>');//add input box
      };
   });
   $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
     e.preventDefault(); $(this).parent('div').remove(); x--;
    });

 });

, кнопка для установки и вызов массива

function getValue() {
  var values = $("[id^=reqInput]").map(function(){
   return this.value;
    }).get();

    console.log(values);
    sessionStorage.setItem("reqs", JSON.stringify(values));
};

Answer 2

$(wrapper).append('<div class="form-group" id="req_name" name="req_name">' + x + '.{{ newReqs.req_name(class_='form-control', id='reqInput') }}<a href="#" class="remove_field"><i class="fa fa-times-circle fa-fw fa-lg"></i></a></div>');//add input box

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

var userInput = document.getElementById("reqInput").value;

... всегда дает значение первого элемента (последующие недопустимы).

Если вы добавляете число (x) для каждого ввода (делая его "reqInput1", "reqInput2" и т. Д.), Как при добавлении их, так и при получении значения, я думаю, выбудьте хороши, поскольку не будет общих идентификаторов (хотя вам нужно будет учитывать, что произойдет, если кто-то удалит любой ввод, кроме самого последнего!)

Обновленный раздел кода будет выглядеть примерно так::

if(x < max_fields){ //max input box allowed
    x++; //text box increment
    var inputId = "reqInput" + x;
    $(wrapper).append('<div class="form-group" id="req_name" name="req_name">' + x + '.{{ newReqs.req_name(class_='form-control', id='???') }}<a href="#" class="remove_field"><i class="fa fa-times-circle fa-fw fa-lg"></i></a></div>');//add input box
    var userInput = document.getElementById(inputId).value;
};

Я не совсем уверен, что вы используете в строке добавления, где написано {{ newReqs.req_name(class_='form-control', id='reqInput(x)') }}, но в итоге вы хотите использовать значение переменной inputId(который будет "reqInput1" или "reqInput2" или т. д.) в качестве идентификатора для поля ввода.