Очень часто нужно клонировать скопировать элемент на странице. Тут 2 способа: с нуля собрать новый объект по аналогии, клонировать объект. Если внутри объекта много элементов, то собрать второй такой же элемент займет много времени. Клонирование как способ имеет преимущество. Функция clone() клонирует выбранный элемент. Вам потребуется небольшое количество кода.
<style>
form { width: 300px; margin:10px; border: 1px solid gray; float: left !important;}
input#plus { margin:10px; border: 1px solid green; float: left !important;}
input#send { margin:10px; border: 1px solid green; float: left !important;}
input#input-text { margin:10px; border: 1px solid gray; float: left !important; }
#box-input { width: 300px; float: left !important; }
#box-buttom { width: 300px; float: left !important; }
</style>
<form name="test" method="get" action="api.php">
<div id="box-input">
<input type="text" name="input" value="" placeholder="Введите текст в поле" id="input-text"><br>
</div>
<div id="box-buttom">
<input type="submit" name="plus" value="добавить поле" id="plus">
<input type="submit" value="отправить" id="send">
</div>
</form>
var i=0;
var q=0;
$("#plus").click(function(){
$("#input-text").clone(true).attr('name', function(){
i++;
return 'input' + i;
}).attr('placeholder', function(){
q++;
return 'Введите текст в поле ' + q;
}).insertAfter($("#input-text"));
return false;
});
При нажатии на кнопку будет скопировано поле и вставлено перед первым полем. Вы можете много раз нажать на кнопку и клонирование будет работать. Поля placeholder и name будут меняться. При клонировании можно применить массу анонимных функций. Благодаря им вы можете менять данные в свойствах элементов.
Существуют несколько способов добавления элементов на страницу: клонирование, append, prepend. Про работу функции append и prepend читайте на странице как вставить элементы в блок div jQuery.