Cloning forms, button not working when it should a

Question

I'm working on an upload media form for my wordpress admin page and i'm having a few issues with the final code that's holding it back.

The idea is that,

One form will display at startup whether it has a value or not. if you click clone, it will clone that form and increment the id and name, it will also add a remove button to all the forms, if you then click remove on any form, the id and name tags will de-increment for all forms after it so it doesn't matter what happens, the forms will always be 1, 2, 3, 4, 5 etc see the fiddle http://jsfiddle.net/jLc8X/

The first issue is:

If you clone the first form and give both forms a value and save, when you refresh the page, both forms will not have a remove button, (all forms should have a remove button unless there was only one) if you then click clone, the remove button will show for all forms and will then work as normal, you won't be able to see this on the fiddle.

The second issue is:

When you click clone, the likelihood is that you are going to want to upload an image straight away on the, this does not work until you save the form.

Here's the code

I think the second issue is down to the separate scripts but i've grid joint them and I can't get it to work.

Here's the jquery, you can also view it in the fiddle.

function updateClonedInput(index, element) {
    $(element).appendTo("#upload_image_sets").attr("id", "clonedInput" +  index);
    $(element).find(">:first-child").attr("id", "upload_image_link_" + index);
    $(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
    $(element).find(">:first-child").next().attr("id", "show_upload_image_link_button_" + index);
}

$(document).on("click", "button.clone", function(e){
    e.preventDefault();
    var cloneIndex = $(".clonedInput").length + 1;
    var new_Input = $(this).parents(".clonedInput").clone();
    updateClonedInput(cloneIndex, new_Input);    
    $('button.remove').show();
});
$(document).on("click", "button.remove", function(e){
    e.preventDefault();
    $(this).parents(".clonedInput").remove();
    if ($('.clonedInput').length < 2) {
        $('button.remove').hide();
    }
    $(".clonedInput").each( function (cloneIndex, clonedElement) {
        updateClonedInput(cloneIndex + 1, clonedElement);
    })
});

// Media Upload
var custom_uploader;
$('.upload_images').click(function(e) {
    alert(this.id);
    e.preventDefault();
    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
     return;
    }
    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
    title: 'Choose Image',
    button: {
        text: 'Choose Image'
    },
     multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
var ter = $(this).siblings('input').attr('id');
custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('#'+ter).val(attachment.url);
    });
    //Open the uploader dialog
    custom_uploader.open();
});

Answer 1

First issue is problem how you generate html on page load, you need to add that button manually, if I understood right.

Second issue is because of this particular line of code:

$('.upload_images').click(function(e) {

This binds only to existing elements, and if you want it to bind for new buttons, you should write it as:

$(document).on('click','.upload_images',function(e) {

Let me know what you think.