JQuery .append () контент не останется на экране

Question

Я создаю форму, где пользователь может добавлять свои модули, которые он изучает в университете. Когда они нажимают кнопку, он добавляет новый набор полей для другого модуля. Я добавил обработчик щелчков для кнопки #add и пытаюсь добавить форму #input_form с теми же полями:

<form id="input_form">

   <h6>Add modules below...</h6>

   <div class="form-row">

      <div class="col-md-6">
         <input type="text" class="form-control" name="module_name" placeholder="Module Name">
      </div>

      <div class="col-md-6">
          <input type="text" class="form-control" name="module_code" placeholder="Module Code">
      </div>

    </div>

    <div class="form-group col-md-6">
        <label for="credit_entry"># of Credits: </label>
        <input type="number" name="credits" id="credit_entry">
    </div>

    <div class="form-group col-md-6">
        <label for="colour_selector">(Optional) Choose a Colour: </label>
           <select id="colour_selector" name="colour_select">
             <option value="blue">Blue</option> <!-- Default -->
             <option value="red">Red</option>
             <option value="yellow">Yellow</option>
             <option value="pink">Pink</option>
             <option value="black">Black</option>
            </select>
        </div>
     </div>

        <div class="row">
          <button name="add" id="add" class="btn btn-secondary">Add Another</button>
        </div>

 // Add fields dynamically
  $("#add").click(function() {
    $("#input_form").append("<h1>The fields will go here</h1>");
  });

Когда я нажимаю кнопку, я вижу содержимое (h1) добавляется на долю секунды, но затем исчезает. Я не уверен, почему добавленный HTML не останется на экране. У меня есть другая часть этого проекта, которая работает аналогично и добавляется в список ul, и HTML сохраняется на экране для этого просто отлично, но по какой-то причине это не так.

Я довольно новичок веб-дизайну и jQuery очень жаль, если есть простой ответ, который я пропускаю.

Answer 1

"Если элемент имеет владельца формы, элемент должен отправить владельца формы из элемента кнопки." ( w3.org )

Это означает, что любая кнопка внутри формы выполняет submit() в родительской форме. Чтобы предотвратить это, явно определите тип кнопки как button:

<button name="add" type="button" id="add" class="btn btn-secondary">Add Another</button>

В действии: https://codepen.io/akamichael/pen/NWqgaWz?editors=1010