从Javascript控制的HTML表单发布按钮值

As the user fills out the form, I have some buttons that dynamically add new questions. However, I can't get the value of these buttons to Post to the subsequent PHP page (all the other information posts fine).

In the example below, I'm not able to get the value of "add_email" in "process-form.php" via $_POST['add_email'];

Thanks in advance for your help. In reduced form, it looks like this:

HTML form

<form id="form" class="form" action="process-form.php" method="POST">
  <input id="name" name="name" type="text" placeholder="Name">

  <!-- Yes/No buttons asking if the user wants to enter their email-->
  <div id="form_email">
    <h4>Do you want to enter your email?</h4>
    <input type="button" class="btn" id="add_email" name="add_email" value="Yes" onclick="showEmailQ(this.value)"></input>
    <input type="button" class="btn" id="add_email" name="add_email" value="No" onclick="showEmailQ(this.value)"></input>
  </div>
  <input type="submit" class="btn" value="Submit &raquo;">
</form>

Javascript

<script>
//Function to process whether user wants to enter email and then display value
function showEmailQ(value){
  var table_row = document.getElementById("form_email");
  if(value == "Yes"){
    table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';
  }
  else{
    table_row.innerHTML = '<p>You have chosen not to enter your email</p>';
  }
}
</script>

PHP

//process-form.php
session_start();
$enteredEmail = $_POST['add_email'];
echo $enteredEmail;  // Nothing prints to screen

You're destroying your form by overwriting the inputs with

table_row.innerHTML = '<input id="email" name="email" type="text" placeholder="Email">';

So maybe change the input name to match

table_row.innerHTML = '<input id="email" name="add_email" type="text" placeholder="Email">';