Как хранить клонированные значения формы в массиве

Question

Мне нужна помощь, чтобы выяснить, как сохранить все значения полей формы из клонированной части моей формы.Я клонирую только div внутри формы, так что все это внутри одной формы.Когда я ввожу несколько значений (после нажатия «Другое»), я всегда получаю последний набор значений, которые я ввел (что, я знаю, ожидается).Но как я могу отправить данные POST, чтобы все введенные мной значения формы?

Пример:

<form action="" method="post">
<p><label>First Name</label><input type='text' name='first_name' value='' required></p><br>
<p><label>Last Name</label><input type='text' name='last_name' value='' required></p><br>
<h3>Additional Registration</h3>
<div id="reg_main">
    <div id="addition_reg">
        <div id="addition_reg_block">
            <p><label>Friend First Name</label><input type='text' name='friend_first_name' value=''></p><br>
            <p><label>Friend Last Name</label><input type='text' name='friend_last_name' value=''></p><br>
            <p><label>Friend Relation</label><input type='text' name='friend_relation' value=''></p>
            <input id="multi-friend" type="checkbox" name="more_friends" value="Multiple Friends" onclick="additional_friend()"> Another<br><br>
        </div>
    </div>
</div>
<p><input type='submit' name='submit' value='Submit'></p><br>
</form>

<script type="text/javascript">

function additional_friend() {
  var checked = document.getElementById("multi-friend").checked;
  if(checked == true){
    var clone = $("#addition_reg").clone("#addition_reg_block");
    $("#reg_main").append(clone);
  }
}

</script>