Cloning div and incrementing - jquery-mobile

Question

I am atempting to clone a div (multiple times) and add increments so I can parse the results into a database using XML. I only want to clone the form section not the data entered. The Div I am cloning has 3 selects and 2 radios (all of which when added need to be empty).
HTML
<div id="Template1" class="template">
<div class="_100">
<div class="_25"> <fieldset>
<label class="label_analysis" for="analysis">Analyte:</label>
<select class="select_analyte" name="analysis" id="analysis">
<option value="">Select</option>
<option value="TN">TN</option>
<option value="TP,NO2+3">TP,NO2+3</option>
</select> </fieldset></div>
<div data-role="controlgroup" class="_13">
<label><input type="checkbox" data-mini="true" name="Filtered" id="Filtered" value="True">
0.45u Filtered</label>
<label><input type="checkbox" data-mini="true" name="Dup" id="Dup" value="True">
Field Dup</label></div>
<div class="_25"><fieldset>
<label class="label_preserve" for="preserve">Preserved</label>
<select class="select_preserve" name="preserve" id="preserve">
<option value="">Select</option>
<option value="HNO3">HNO₃</option>
<option value="H2SO4">H₂SO₄</option>
</select></fieldset></div>
<div class="_20"> <fieldset>
<label class="label_cool" for="cool">Cooled</label>
<select class="select_cool" name="cool" id="cool">
<option value="">Select</option>
<option value="Ice">Ice</option>
<option value="Frozen">Frozen</option>
<option value="None">None</option>
</select>
</fieldset></div>
<div class="_13">
Add Analyte
Remove</div>
</div>
</div>
<div id="place" class="place"></div>
I have tried two different scripts
This script works as I want to hide the remove button on the original div and only have it appear on the cloned but it doesn't increment.
(function($){
var Template = $('.Template');
var count = 0;
$('.removeNew').hide().on('click', function(e) {
e.preventDefault();
$(this).closest('.Template').remove();
});
$('a.showNew').on('click', function(e) {
e.preventDefault();
var clone = Template.clone(true, true).insertAfter("#place").find('.removeNew').show().end();
});
})(jQuery);
and this one which increments but doesn't hide the remove button
$('#showNew').click(function() {
var num = $('.template').length,
newNum = new Number(num + 1),
newElem = $('#Template' + num).clone(true, true).attr('id', 'Template' + newNum).appendTo('#place');
newElem.find('.analysis').attr('id', 'ID' + newNum + '_analysis').attr('name', 'ID' + newNum + '_analysis').val();
newElem.find('.preserve').attr('id', 'ID' + newNum + '_preserve').attr('name', 'ID' + newNum + '_preserve').val();
newElem.find('.cool').attr('id', 'ID' + newNum + '_cool').attr('name', 'ID' + newNum + '_cool').val();
$('#Template'+ num).after(newElem);
});
})
I am wondering if there is some way to combine them...
I am also having issues as no matter what I seem to try the original div becomes the clone, complete with remove button, while what should be the original div can be changed.

Answer 1

I believe the simplest approach is to have an original copy of the template hidden and base all clones off of that. This fiddle demonstrates this approach.
(function ($) {
var Template = $('#Template');
var count = 0;
var nextId = 0;
Template.find('.removeNew').on('click', function (e) {
e.preventDefault();
$(this).closest('.template').remove();
count--;
});
function cloneTemplate(removable) {
var clone = Template.clone(true, true);
clone.attr('id', clone.attr('id') + nextId);
clone.find('label[for]').each(function( index ) {
var elem = $(this);
elem.attr('for', elem.attr('for') + nextId);
});
clone.find('select, input').each(function( index ) {
var elem = $(this);
elem.attr('id', elem.attr('id') + nextId);
elem.attr('name', elem.attr('name') + nextId);
});
if (!removable) {
clone.find('.removeNew').remove();
}
clone.insertBefore("#addNew").removeClass('hide');
count++;
nextId++;
}
// Create First Analyte and delete the remove button.
cloneTemplate(false);
$('a.showNew').on('click', function (e) {
e.preventDefault();
cloneTemplate(true);
return false;
});
})(jQuery);
It didn't make sense to have the Add New button inside the template so I moved it outside. All new clones are added before the Add New button.
You should notice in the script above that the first element is created by cloning the Template. Then new elements are created calling the same clone function when the Add New button is clicked.
Note: This solution does not include updating element id or name attributes. Something that you almost certainly want to do.