How to copy an html block when clicking a link/button?

Question

Today a friend and I thought about developing a system for registering resumes, only I need to click on a link add 1 more block inputs each time clicked. I tried searching, and did not find nice fonts, ie did not know how to search.

See the image below to understand better:

Note: I am using Codeigniter if he has any helper do that.

Answer 1

Look at that:

• Insert several <input> unadjusted name, they won’t even be submitted.
• Insert several <input> with the same value in the attribute name, only the last will be submitted.

What you are wanting to do deserves a little more care, it is not simply insert a <input> behind each other. In fact, it may be, since you do not need to recover this data later and I believe that the goal is not this.

What you can do is:

• Have several <input> with the attribute name being an array. On the server you by iterate over that array and retrieve the data. For example:

<input type='text' name='empresas[]' placeholder='Nome da empresa 1'/>
<input type='text' name='empresas[]' placeholder='Nome da empresa 2'/> <!-- s/ problemas -->

---

Or else...

• Set the value of the attribute name being empresa-x, where x is the "field index" and this number should be incremented each time a new input is entered in the form. In this case you must clone the last element, increment the value of x and insert at the end of the form.

<input type='text' name='empresa-1' placeholder='Nome da empresa 1'/>
<input type='text' name='empresa-2' placeholder='Nome da empresa 2'/>
<!-- ... -->

The first is simpler, because all you have to do is clone the element. The second is a bit more boring to do because it is necessary to increase the index number and replace all attributes name, but nothing complicated. It will depend on how you want to get this data on the server later.

Cloning with Array

$(function(){
  $('button').on('click', function(){
    $('.info-block:first').clone().insertAfter('.info-block:last');
  });
});

.info-block { padding: 10px; border: 1px solid #ccc }

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

<div class='container'>
 
  <!-- bloco que será clonado -->
  <div class='info-block'>
    <input type='text' name='empresas[]' placeholder='Empresa'/>
    <input type='text' name='escolas[]' placeholder='Escola'/>
    <!-- outros campos... -->
  </div>
</div>

<button>Adicionar + campos</button>

Cloning

In this second example, to make it easier to control the index I created a <span> as if it were an accountant. Through it it is possible to obtain the last index to increment it and clone the block.

$(function(){

  $('button').on('click', function(){
    
    var $bloco = $('.info-block:last').clone(), 
        indice  = parseInt($bloco.find('span').text()) + 1; 
    
    $bloco.find('span').text(indice);
    $bloco.find('input[name^="empresa-"]').attr('name', 'empresa-' + indice);
    $bloco.find('input[name^="escola-"]').attr('name', 'escola-' + indice);
    
    // Se ouver outros inputs, altera o atributo name deles com o índice
    
    $bloco.insertAfter('.info-block:last');
  
  });
});

.info-block { padding: 10px; border: 1px solid #ccc }

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

<div class='container'>

  <!-- bloco que será clonado -->
  <div class='info-block'>
    <span>1</span>
    <input type='text' name='empresa-1' placeholder='Empresa' />
    <input type='text' name='escola-1' placeholder='Escola' />
    <!-- outros campos... -->
  </div>
</div>

<button>Adicionar + campos</button>

Answer 2

Assuming the html file:

<div class='dados'>
  <input type="text" value="" />
</div>
<a href="javascript:void(0);" id="btnAdd">+</a>

By clicking the button, through a jQuery event, you solve the problem:

$("#btnAdd").click(function() {
    $(".dados").append('<input type="text" value="" />');
});

Test with this fiddle