Question

I have managed to get my click event working with the following code. When I click the button I want mutiple fields to appear. For example at the moment when I click ‘add another address only the last field clones but I want all fields to clone e.g. street, line2, line3 etc. I no I need to add more code in the jquery but not exactly sure what!
Thanks in advance

Script:

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var num = $('.clonedInput').length;
        var newNum = new Number(num + 1);
        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
        newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
        $('#input' + num).after(newElem);
        $('#btnDel').attr('disabled', '');
        if (newNum == 3) $('#btnAdd').attr('disabled', 'disabled');
    });
    $('#btnDel').click(function() {
        var num = $('.clonedInput').length;
        $('#input' + num).remove();
        $('#btnAdd').attr('disabled', '');
        if (num - 1 == 1) $('#btnDel').attr('disabled', 'disabled');
    });
    $('#btnDel').attr('disabled', 'disabled');
});​

Sample of html form:

Street*

<div id="input2" style="margin-bottom:4px;" class="clonedInput">
Line2<span class="required"><font color="#CC0000">*</font></span> 
<input name="Line2"  type="text" id="Line2"> 
</div>

<div id="input3" style="margin-bottom:4px;" class="clonedInput">
Line3<span class="required"><font color="#CC0000">*</font></span> 
<input name="Line3"  type="text" id="Line3"> 
</div>

<div id="input4" style="margin-bottom:4px;" class="clonedInput">
Town<span class="required"><font color="#CC0000">*</font></span>   
<input name="Town"  type="text" id="Town">
</div>

<div id="input5" style="margin-bottom:4px;" class="clonedInput">
Postcode<span class="required"><font color="#CC0000">*</font></span> 
<input name="Postcode"  type="text" id="Postcode">
</div>

For example when using the codes above only the Postcode field would double. My main aim from this is that applicants can add more than one address.
Thanks

Answer 1

In your code you are just cloning the last element. I would suggest you to wrap the whole address inside a div wrapper and clone the wrapper instead of cloning each and every element. Then you can work through the cloned object. Try my demo and check the output HTML to see how it works.

DEMO

Below is the actual code,

JS:

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var $address = $('#address');
        var num = $('.clonedAddress').length;
        var newNum = new Number(num + 1);
        var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');

        //set all div id's and the input id's
        newElem.children('div').each(function(i) {
            this.id = 'input' + (newNum * 5 + i);
        });
        newElem.find('input').each(function() {
            this.id = this.id + newNum;
            this.name = this.name + newNum;
        });

        if (num > 0) {
            $('.clonedAddress:last').after(newElem);
        } else {
            $address.after(newElem);
        }

        $('#btnDel').removeAttr('disabled');

        if (newNum == 3) $('#btnAdd').attr('disabled', 'disabled');
    });

    $('#btnDel').click(function() {
        $('.clonedAddress:last').remove();
        $('#btnAdd').removeAttr('disabled');
        if ($('.clonedAddress').length == 0) {
            $('#btnDel').attr('disabled', 'disabled');
        }
    });
    $('#btnDel').attr('disabled', 'disabled');
});

HTML:

<div id="address">
  <div id="input1" style="margin-bottom:4px;" class="input">
    Street<span class="required">*</span>
    <input name="Street"  type="text" id="Street">
  </div>
  <div id="input2" style="margin-bottom:4px;" class="input">
   Line2<span class="required">*</span>
   <input name="Line2"  type="text" id="Line2">
  </div>
  <div id="input3" style="margin-bottom:4px;" class="input">
   Line3<span class="required">*</span>
   <input name="Line3"  type="text" id="Line3">
  </div>
  <div id="input4" style="margin-bottom:4px;" class="input">
   Town<span class="required"><font color="#CC0000">*</font></span>   
   <input name="Town"  type="text" id="Town">
  </div>
  <div id="input5" style="margin-bottom:4px;" class="input">
   Postcode<span class="required">*</span>
   <input name="Postcode"  type="text" id="Postcode">
  </div>
</div>

NOTE: Removed font tag from html and added below css for the required *

CSS:

.required { color: #cc0000; }