Проблема с использованием jquery serialize () в модальной форме

Question

При использовании модального Bootstrap 4 с несколькими отображаемыми или скрытыми несколькими формами имена полей формы изменяются на случайные значения. От Google Chrome Devtools - Источник формы:

<div>
  <label for="YoB">Birth Year</label>
  <input type="text" class="form-control" name="YoB" placeholder="YoB (approx)">
</div>

От Google Chrome Devtools - Элементы:

<form id="AWForm2" class="form" role="form" autocomplete="off" style="display:none;">
<div>
  <label for="YoB">Birth Year</label>
  <input type="text" class="form-control" name="ryfdlthwhsn" placeholder="YoB (approx)">
</div>
<button class="btn btn-lg btn-block" type="button" onclick="process()"><i class="fa fa-search"></i> SEARCH NAMES</button>

function process() {
      var saveDat = $("#AWForm2").serialize();
}

При вводе 1985 года в элемент ввода формы и нажатии кнопки, результат: "ryfdlthwhsn=1985"

Похоже, что DOM изменился с изменением имени входа. Может кто-нибудь объяснить, что происходит и как я могу программно получить значение ввода с именем «YoB». Обратите внимание, что DOM отображается в модальном режиме при нажатии кнопки.