Вопрос от бэкенд-разработчика (динамическая форма)

Frontend developer
1

Товарищи фронтовики, прошу помощи!
Сам во фронте/js не ориентируюсь от слова совсем, столкнулся с необходимостью создания динамической формы. С помощью гугла кое как написал кривое решение, но оно работает не совсем корректно.
Хотел приложить HTML, чтобы показать наглядно, но форум не позволяет. Поэтому код под катом:

Summary

<!doctype html>

need help! 
  <section id="add" style="padding-top: 90px;">
    <h2>Пример динамической формы</h2>
    <p>Все поля обязательны для заполнения</p>
    <form id="NewOrder" action="index.php" method="post">
      <div class="grid">
        <input type="hidden" name="action" value="order_new">
        <select id="select" name="vars" required>
        <option selected disabled value="">
           Selector 1
        </option>
	<option value="1">Var1</option>
	<option value="2">Var2</option>
	<option value="3">Var3</option>
        </select>
        <input type="tel" name="phone" placeholder="Телефон">
      </div>
      <div id="AddFuel">
      <div class="grid" style="vertical-align: bottom;">
        <select id="select" name="fuel_id[]" aria-label="Выберите топливо..." required>
        <option selected disabled value="">Parametrs</option>
	<option value="1">Par1</option>
	<option value="2">Par2</option>
	<option value="3">Par3</option>
        </select>
        <input type="text" name="sum[]" placeholder="Значение" required>
        <p style="vertical-align: bottom;"><a href="javascript:addLink();">добавить</a></p>
      </div>
      </div> 
      <div id="newDiv">
      </div>
      <div class="grid">
        <input type="text" name="comment" placeholder="Комментарий" required>
      </div>
     <button type="submit">Создать</button>
    </form>
  </section>

Собственно мой кривой JS:

<script>
var d = document,
        myForm = d.getElementById('NewOrder'),
    addContent = myForm.querySelector('#AddFuel');

function addLink() {
      newBlock = d.getElementById('newDiv');

newBlock.innerHTML += addContent.outerHTML;
}
</script>

Что работает не так:
Если я добавляю поле один раз, то все корректно. Когда добавляю еще одно значение - у меня пропадает значение, введённое во второе (добавленное) поле. Прилагаю скрины.
До добавления третьего инпута
dyn1

Когда нажимаю вторую кнопку "Добавить"
dyn2_empty
Видим два пустых значения...

Методом тыка пытался исправить, заменил

newBlock.innerHTML += addContent.outerHTML;

на

newBlock.outerHTML += addContent.outerHTML;

значения не теряются, но инпут вставляется в середину!!)
dyn_outer

Подскажите, как правильно реализовать такой функционал? Одолел меня JS, очень трудно понимаю фронт :frowning:

Ну и если подскажете, было бы совсем прекрасно (задача со звездочкой :slight_smile: ) - на последнем инпуте рядом с "добавить" кнопка "удалить", чтобы убрать последний вставленный инпут (если ткнули случайно).