javascript – Append multiple form elements without losing data


I have this form that allows the user to add inputs to it. It works great when you add the first one, or even a second or 3rd, however if you try to add data to the fields it erases that data ever-time you press add option(append). So if I append an option input, then write something in the input value, then press add option again it adds another option input but erases the data from the first one.

The section of the form I’m appending elements to:

  <div id="appendoption" style="background-color: rgb(243 243 243);">
  </div>
  <button onclick="append_option();" type="button" class="btn btn-sm btn-secondary mb-3 mx-4">Add Option</button>

JavaScript that does the append:

   function append_option() {
        var option = '<div class="option-form"><div class="form-group"><span>Option</span><input type="text" name="option_text" class="form-control" value="" /></div><div class="mx-4"><span>Answer</span><br /><input type="checkbox" class="form-check-input answer-checkbox" value="0" /><input type="hidden" name="correct_option()" class="form-control answer-hidden-input" value="0" /></div><button type="button" class="btn btn-sm btn-danger align-self-center remove-option">Remove</button></div>';
        var element = document.getElementById('appendoption');
        element.innerHTML = element.innerHTML + option;
    }