jQuery: delegate adding input fields, multiple times

Here is the lin开发者_StackOverflow社区k : Demo link

Click on 'Group' , then click on 'Monetary'. You will see a form with green '+' sign. When this green '+' is clicked, multiple input fields are added, instead of one.

Following is the code on clicking of '+' sign.

Line # : 178

jQuery('#input span.con').delegate('p a[id=add_field]', 'click', function(){ 


var Id = jQuery(this).attr('id');
Id = 1+ parseInt(Id); 

jQuery('#input span.con p span.text_field').append('<span class="text_field" id="'+ Id +'"><input type="text" name="pemails[]" class="text_field" /><a class="edit_field" name="delete" id="'+ Id +'" href=""><img src="'+base_url+'resource/images/fend/delete.png" border="0" /></a></span>');

return false;

});

Line # : 472

jQuery('#input span.con').prepend('<p><label for="" class="label">Participent Email:</label><span class="text_field"><span class="text_field">Click here to add the data.<a class="edit_field" name="add_field" id="add_field" href=""><img src="'+base_url+'resource/images/fend/add.png" border="0" /></a></span><span class="text_field" id="1"><input type="text" name="pemails[]" class="text_field" /><a class="edit_field" name="delete" id="1" href=""><img src="'+base_url+'resource/images/fend/delete.png" border="0" /></a></span></span></p>');
    }

For js file reference: File name : wizard.js Line # : 178 Line # : 472 (It is adding '+' sign through javascript)

Can some one guide me where Iam doing wrong and how it can be rectified.

Thanks in advance

You shouldn't have repeated ids, never. That may be causing you problems.

You are giving the same ids (Id var) to the span and the a in this line (and they are numerical , shouldn't be!)

jQuery('#input span.con p span.text_field').append('<span ... id="'+ Id +'">...<a ... id="'+ Id +'" ...>...</a></span>');

My advise is to use ids like the following:

var aId = "a"+Id;
var spanId = "span"+Id;

So you'd have:

jQuery('#input span.con p span.text_field').append('<span ... id="'+ spanId +'">...<a ... id="'+ aId +'" ...>...</a></span>');

Hope this helps. Cheers