Как фиксировать предыдущий элемент?

Question

[Александр Валутин]

Создаю новые строки динамически. Проблема такая: если заполнить значение строки и нажать на "Добавить", то ниже создается новая строка, однако, значения из полей строки, которая находится выше, исчезают. Как фиксировать значения полей, чтобы, при добавлении новой строки, они не исчезали?

<div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <H2>Исправительная форма</H2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="main"></div>
                <button type="button" id="btn">Добавить</button>
                <button type="button" id="del_btn">Удалить</button>

{literal}
                    <script type="text/javascript">
                        rows = 0;
                        addRow();
                        btn.addEventListener('click', addRow);
                        del_btn.addEventListener('click', deleteRow);
                        function deleteRow() {
                            if (rows != 1 && rows <= 5) {
                                rows--;
                                divElement = document.getElementById('divsf');
                                divElement.parentNode.removeChild(divElement);
                            }
                        }
                        function addRow() {
                            if (rows < 5) {
                                rows++;
                                main.innerHTML += _makeRow();
                            } else {
                                alert('ХВАТИТ');
                            }
                        }
                        function _makeRow() {
                            return `
              <div class="row" id="divsf">
               <div class="col-sm-2">
                <div class="form-group">
                    <label>Признак<br>записи: </label>
                    <select name="sign_record" class="form-control">
                        <option value="main_fix">Основаная</option>
                        <option value="additional_fix">Допполнительная</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-1">
                <div class="form-group">
                    <label>Дата<br/>регистрации:</label>
                    <div class="form-group">
                        <input  class="form-control input-sm"
                                id="registration_date" type="text"  name="registration_date_fix">
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Номер<br/> исправления:</label>
                    <input type="text" class="form-control input-sm" name="number_fix">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="form-group">
                    <label>Дата<br/>исправления:</label>
                    <div class="form-group">
                        <input  class="form-control input-sm"
                                id="correction_date_fix" type="text"  name="correction_date_fix">
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Сумма:</label>
                    <input type="text" class="form-control input-sm" name="sum_fix">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Услуга</label>
                    <input type="text" class="form-control input-sm" name="service_fix">
                </div>
            </div>
        </div>
`}
                    </script>
                {/literal}
            </div>

маленькое уточнение: элементы добавляются внутри tpl шаблона

Answer 1

[Александр Валутин]

Решил вопрос так: в function addRow() нужно кое-что подправить

function addRow() {
                            if (rows < 5) {
                                rows++;
                                $('#main').append(_makeRow());
                            } else {
                                alert('ХВАТИТ');
                            }
                        }

Только теперь вопрос в другом. Как сделать так, чтобы удалялась последняя созданная строка, а не первая?

Answer 2

[IgorNoskov]

В функции _makeRow сделайте уникальными все id, при генерации новой строки создаются элементы с уже существующими id. У элементов формы нужно также генерировать элементы с уникальными атрибутами name, а то получается у вас в одной и той же форме создаются элементы с идентичными атрибутами name и id.