Button to insert new inputs into the form

Question

I have a website that records building launches. Then some buildings have more than one tower, and I would like for each tower, I had the possibility to insert 4 inputs (type, footage, dormitories, vacancies)

Something more or less like this:

<form>
<input type="text" name="torres"><button id="addtorre">Adicionar Torre</button>
<button type="submit">Cadastrar</button>
</form>

Then put 2 in the field "towers" and click on "Adicionar Torre", would be:

<form>
<input type="text" name="torres"><button id="addtorre">Adicionar Torre</button>
<input type="text" name="tipo1">
<input type="text" name="metragem1">
<input type="text" name="dorm1">
<input type="text" name="vaga1">
<input type="text" name="tipo2">
<input type="text" name="metragem2">
<input type="text" name="dorm2">
<input type="text" name="vaga2">
<button type="submit">Cadastrar</button>
</form>

Answer 1

Doing this in the Jquery you can add:

$('.addtorre').click(function(){
    $('form').append(
        '<input type="text" name="tipo[]">'+
        '<input type="text" name="metragem[]">'+
        '<input type="text" name="dorm[]">'+
        '<input type="text" name="vaga[]">'
    );
});

Fields become arrays when passed to the PHP.

Reference

Because I removed the <form>?

The tag <form> here only served to represent the form, so there was no need to create a preventDefault() form, the removal of the tag already does the job, since the sending method can be done in Jquery.Ajax().

Here in the HTML added the attribute id to the tags <input> and the class="torre":

<div class="form">
    <input type="text" name="torres"><button id="addtorre">Adicionar Torre</button>
    <button type="submit">Cadastrar</button>
    <input type="text" name="tipo" id="1" class="torre">
    <input type="text" name="metragem" id="1" class="torre">
    <input type="text" name="dorm" id="1" class="torre">
    <input type="text" name="vaga" id="1" class="torre">
</div>

In the Jquery, by clicking on <button> "Add Tower", the last value is searched id, added 1 and then we have the id of the new tower, then we do the append() within the <div class="form"> of the same:

$('#addtorre').click(function(){
    var id = parseInt($(".torre").last().attr('id'))+1;
    alert(id);
    $('.form').append(
        '<input type="text" name="tipo" id="'+id+'" class="torre">'+
        '<input type="text" name="metragem" id="'+id+'" class="torre">'+
        '<input type="text" name="dorm" id="'+id+'" class="torre">'+
        '<input type="text" name="vaga" id="'+id+'" class="torre">'
    );
});