Q:

Dynamic form for submit values

I'm creating a simple form that allows you to enter data that will then be sent to a DB. In particular I need to know from you how I can create a dynamic form that allows me to enter a number of people specified by the user. Basically if the user wants to add 3 people must present 3 new fields to enter Name, Surname and email, if he wants to add 5, 5 new fields.
I write this, but in my index.php it doesn't work.

// Funzione che permette di aggiungere elementi al form (in questo caso rate)
function Aggiungipersone(person) {
  var numero_persone = person.value;
  var box = document.getElementById('box_person');
  if (numero_persone == "") {
    box.innerHTML = '';
  } else {
    if (isNaN(numero_persone) == true) {
      box.innerHTML = '';
    } else {
      var righe = "";

      // Inserisco una riga ad ogni ciclo
      for (i = 1; i <= numero_persone; i++) {
        righe = righe + "Persona n°" + i + " : <input type='text' name='iname" + i + " size='10' value='" + Cognome + "' type='text' name='isurname' size='10' value=''/><br/>";
      }
      // Aggiorno il contenuto del box che conterrà gli elementi aggiunti
      box.innerHTML = righe;
    }
  }
}
Inserire i dati richiesti:<br><br>
<form method="post" action="input.php">
  <b> Richiedente Conferenza:</b><br><br> Nome:
  <input type="text" name="name" size="20"><br> Cognome:
  <input type="text" name="surname" size="20"><br> Email: <input type="email" name="email" size="20"><br> Oggetto Conferenza:<br><textarea name="testo" rows="5" cols="40" placeholder="Specificare oggetto Videoconferenza"></textarea><br>


</form>

UPDATE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Prenotazione Videoconferenza</title>
<script src="utils.js"></script>
</head>

<body>
<?php
$( document ).ready(function() {
    $("#add").click(function(){

      var val1 =$("#n1").val();
      for(var i=0;i<val1;i++){
      $("#start").append($("#first").clone());
      }
    });
});
?>

Inserire i dati richiesti:<br><br>
<form method="post" action="input.php">
<b> Richiedente Conferenza:</b><br><br>
Nome:<input type="text" name="name" size="20"><br>
Cognome:<input type="text" name="surname" size="20"><br>
Email: <input type="email" name="email" size="20"><br>
Oggetto Conferenza:<br><textarea name="testo" rows="5" cols="40" placeholder="Specificare oggetto Videoconferenza"></textarea><br>

</form>
</body>
</html>

In the utilis.js i inserted:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="n1" value="1"><br>

<a href="#" id="add">Add</a>

<div id="start">
  <div id="first">
    Nome:<input type="text" name="name" size="20"><br> Cognome:
    <input type="text" name="surname" size="20"><br> Email: <input type="email" name="email" size="20"><br>
    <br>
  </div>
</div>

A:

1) With VueJS - demo on code pen
2) JQuery

const tmpl = $('#tmpl').html().trim()

$('#btn-add').click(() => {
    let peopleCount = +$('#people-count').val(),
        html = Array(peopleCount)
            .fill(tmpl)
            .join('')
    $('#form-items').append(html)
})

$('#form')
    .submit(() => {
        alert('Submit form by ajax or remove this mathod for default behavior')
        return false;
    })
    .delegate('.btn-del', {
        click() {
            $(this).closest('.row').remove()
        },
    })
<div id="app">
    <div>
        <div>
            <button id="btn-add">Add new user</button>
            <label>Number of People:</label>
            <input type="number" id="people-count" value="1" min="1">
        </div>
        <form id="form">
            <div id="form-items" data-empty="Users list is empty"></div>
            <button>Send</button>
        </form>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/x-template" id="tmpl">
    <div class="row">
        <label>
            Name:
            <input class="people" name="name[]">
        </label>
        <label>
            Surname:
            <input class="people" name="surname[]">
        </label>
        <label>
            Email:
            <input type="email" class="people" name="email[]">
        </label>
        <button class="btn-del">Delete</button>
    </div>
</script>

<style>
    .people {
        width: 80px;
    }
    #form-items:empty + button {
        display: none;
    }
    #form-items:empty:before {
        content: attr(data-empty);
        display: block;
    }
</style>

