I have a form builder in my application that I'm attempting to use jquery to improve. I've created a series of button that will clone a hidden div and places it in the form. So if you want a text field you click the text field button and it is added to the form. The problem is I would end up with multiple id and name fields that are identical so I need to also change them to something unique at the same time that the field is added. Here is what I have so far:

Code JavaScript:
var i = 0;
	$('button#text-field').click(function() {
	i++;			
		$('div#textField').clone()
			.insertAfter('div.fields:last').attr('id', 'text_field'+i)
		$('input#field_name').attr('name', 'fieldname'+i);
		$('input#field_name').attr('id', 'fieldname'+i);
		$('input#field_db_alias').attr('name', 'fielddbalias'+i);
		$('input#field_db_alias').attr('id', 'fielddbalias'+i);
		$('.var').attr('value', +i);
 
	});

All I'm trying to do is change the name and id fields and add a number that is incremented each time a field is added. This works but for the input fields (field_name and field_db_alias) it doesn't just change the fields in the added div, it also changes the hidden div that is used for cloning. I can't figure out how to only select the input fields that have just been added. Any suggestions how I can select only the items in the new div? Seems I should be able to create a var with the id of the div ('text_field'+i) and then use that in my selector but I haven't been able to get it to work.