[jQuery] Why isn't the name attr in this code incrementing?

[jQuery] Why isn't the name attr in this code incrementing?


Hi, all...
I'm cloning a section of code to create additional image
inputs in a form, along with a yes/no select field.
When the cloning occurs, I also need to increment the field
names of the select statement (main-photo-1, main-photo-2, etc.),
and the file input field (image-upload-1, image-upload-2, etc.)
Here's the HTML:
<div id="image-input">
                                        
<div id="image-div-1">
                                            

Is this photo the main property photo?

    
    
<select id="main-photo-next" name="main-photo-1" class="textinput01">
                                    
<cfif isdefined("form.fieldnames")>
<option value="<cfoutput>#form.main-photo-1#</cfoutput>" selected></option>
</cfif>
                                        
<option value="Yes">Yes</option>
<option value="No">No</option>
                                        
</select>
                                                
<input id="image-next" name="image-upload-1" type="file" size="65" value="">
                                            
</div>
                                            
</div>
<button id="add-image">Add New Image Field</button>
Here's the jQuery (a hacked-up version of something simpler that worked well,
but was missing functionality I now need) that I'm using to clone the entire div, "image-div-1".
<script type="text/javascript">
    
$(document).ready(function() {
        
$('#add-image').click(function() {
$('#image-div-1').clone(true)
                
.attr('id', function() {
return this.id.replace(/(.+)(\d+$)/, function(s, p1, p2) {
return p1 + (parseInt(p2, 10) + 1);
})
})    
.appendTo('#image-input');
return false;
                    
$('#main-photo-next :last').attr('name', function() {
return ('#main-photo-next :last').name.replace(/(.+)(\d+$)/, function(s, p1, p2)
{
return p1 + (parseInt(p2, 12) + 1);
                        
})
});                
                
});
            
});
        
</script>
As you can tell, the code is not complete, as it doesn't deal with incrementing
the "image-next" file input field.
When I click the button to clone the div, everything appears in the DOM as it
should, but the name of the select input is not incrementing. Each select statement
is named "main-photo-1".
How do I need to adjust the code to cause the name to increment?
Also, what code would I add to increment the "image-next" filefield?
One last issue is how to increment the value in the select statement,
"<cfoutput>#form.main-photo-1#</cfoutput>".
Any tips or code would be appreciated!
Thanks,
Rick