Duplicate inputs with bootstrap

Question

I’m creating a form with tabs and I have to duplicate a set of inputs to another line and wanted help to do this. I’m using bootstrap and there’s the code snippet to be duplicated.

<form class="formulario" role="form">
  <div class="tab-content">
    
    <div class="tab-pane active" role="tabpanel" id="step1">
      <div class="row">
        <h4>
            <i class="fa fa-comments"></i>
            Encontros presenciais
        </h4>
        </div>

        <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="local-encontpresen">Local:</label>
                <input type="text" class="form-control" name="local-encontpresen" id="local-encontpresen">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="data-encontpresen">Data:</label>
                <input type="date" class="form-control" name="data-encontpresen" id="data-encontpresen">
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label for="tipo-avl-encontpresen">Tipo de Avaliação:</label>
                <select id="tipo-avl-encontpresen" class="form-control">
                    <option hidden="true">Selecione</option>
                    <option>Prova tradicional</option>
                    <option>Prova via Moodle</option>
                </select>
            </div>
        </div>
        
        <div class="col-md-1">
            <div class="form-group">
                <label for="peso-encontpresen">Peso:</label>
                <input type="number" class="form-control" name="peso-encontpresen" id="peso-encontpresen" step="1" min="0">
            </div>
        </div>

        <div class="col-md-1">
             <div class="form-group">
                 <button class="btn-adicionar">Adicionar</button>
                 <button class="btn-adicionar">Adicionar</button>
             </div>
        </div>
      </div>
    </div>
    
    <div class="row">
      <ul class="list-inline pull-right">
        <li><button type="button" class="btn btn-primary next-step">Salvar e continuar</button></li>
      </ul>
    </div>
    
  </div>
</form>

In this second image I have the image of the tabs created:

Project link on Github

Answer 1

How you plan to create multiple elements with the same name, should convert them to array by adding [] at the name:

Ex.: name="peso-encontpresen[]"

To duplicate you can create a variable with the div containing the particulars on the form:

var clone_step1 = $("#step1").find(".row:eq(1)").html(); // cópia da div com os inputs
$(document).on("click", ".btn-adicionar", function(e){
   $("#step1")
   .find(".row:eq(1)")
   .append(clone_step1); // insere nova linha

   $(this)
   .closest(".col-md-1")
   .remove(); // remove o botão adicionar
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<form class="formulario" role="form">
   <div class="tab-content">
      <div class="tab-pane active" role="tabpanel" id="step1">
         <div class="row">
            <h4>
               <i class="fa fa-comments"></i>
               Encontros presenciais
            </h4>
         </div>
         <div class="row">
            <div class="col-md-4">
               <div class="form-group">
                  <label for="local-encontpresen">Local:</label>
                  <input type="text" class="form-control" name="local-encontpresen[]" id="local-encontpresen">
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="data-encontpresen">Data:</label>
                  <input type="date" class="form-control" name="data-encontpresen[]" id="data-encontpresen">
               </div>
            </div>
            <div class="col-md-3">
               <div class="form-group">
                  <label for="tipo-avl-encontpresen">Tipo de Avaliação:</label>
                  <select id="tipo-avl-encontpresen" class="form-control">
                     <option hidden="true">Selecione</option>
                     <option>Prova tradicional</option>
                     <option>Prova via Moodle</option>
                  </select>
               </div>
            </div>
            <div class="col-md-1">
               <div class="form-group">
                  <label for="peso-encontpresen">Peso:</label>
                  <input type="number" class="form-control" name="peso-encontpresen[]" id="peso-encontpresen" step="1" min="0">
               </div>
            </div>
            <div class="col-md-1">
               <div class="form-group">
                  <button class="btn-adicionar">Adicionar</button>
               </div>
            </div>
         </div>
      </div>
      <div class="row">
         <ul class="list-inline pull-right">
            <li><button type="button" class="btn btn-primary next-step">Salvar e continuar</button></li>
         </ul>
      </div>
   </div>
</form>