Add and remove button function - to clone form

Question

Good afternoon, I have the following question: I have a training form, with the following Dropdown Fields:

GROUP EXERCISE SERIES REPETITION LOAD BREAK

and would like to have the option of repeating the field, thus:

GROUP EXERCISE SERIES PAUSE LOAD [ADD BUTTON] [REMOVE BUTTON]

and when I clicked the button, the same fields appeared again, as I could do?

Thanks. [newbie]

Answer 1

You could do as described below. However you will have to take care of duplicate ids at the time of form Ubmit. You can work on javascript to change the duplicate id. Could you explain to me why you want this duplicate? Maybe I can give you a better solution than this duplication

var newid = 1;
function adicionaForm() {
  var formulario = document.getElementById("form")
  var cln = formulario.cloneNode(true);
  cln.id = cln.id+newid;
  document.getElementById("div").append(cln);
  newid = newid+1;
}

function removerForm(){
document.getElementById("div").lastChild.remove();

}

#div form label{
  display: block;
  padding: 3px;
}

#div form input{
border-radius: 3px;
border: 1px solid #ccc;
width:100%;
}
#div form{
margin-bottom:10px;
}

<div id="div">
  <form id="form">
    <label>Grupo</label>
    <input type="text"><br/>
    <label>Exercício</label>
    <input type="text"><br/>
    <label>Série</label>
    <input type="text"><br/>
    <label>Repetição</label>
    <input type="text"><br/>
    <label>Carga</label>
    <input type="text"><br/>
    <label>Pausa</label>
    <input type="text"><br/>
  </form>
</div>
  <button type="button" onclick="adicionaForm()" id="adicionar">Adicionar Exercício</button>
  <button type="button" onclick="removerForm()" id="adicionar">Remover Exercício</button>