Создайте инкрементную форму на лету в jquery и при удалении замените ее следующей строкой

Question

Я играл с каким-то кодом для того, что кажется возрастом, теперь я, наконец, получил его на работу, но есть 2 проблемы с ним, насколько я могу это сделать.

Во-первых, если вы добавляете несколько форм, оно увеличивается, то есть 1, 2, 3 и т. Д., Поэтому, если я создам 3 формы и удаляю форму 2, я остаюсь с формами 1 и 3, если я затем перейду к добавлению другой формы он будет дублировать форму 3, а затем добавить 4, 5, 6 и т. д.

Способ, которым я хотел бы работать, если вы удалите форму 2, форма 3 заменит все 3 в атрибутах и ​​заменит их на 2 эффективно заменяя форму 2.

Во-вторых, после того, как я обновляю страницу, формы будут удалены, поэтому мне бы хотелось, чтобы формы имели значение для отображения.

Вот скрипку: http://jsfiddle.net/33Ks6/

Вот JQuery:

// Add extra upload bars 
$("#add").click(function() { 
    var intId = $("#image_upload div").length + 1; 
    var fieldWrapper = $("<div id=\"upload-image-set-" + intId + "\"/>"); 
    var fName = $("<input type=\"text\" id=\"show_upload_image_link_" + intId + " size=\"36\" name=\"kandibox_theme_hero_options[show_upload_image_link_" + intId + "]\" value=\" <?php echo $hero_options['show_upload_image_link_1']; ?> \" />"); 
    var mediaButton = $(" <input id=\"show_upload_image_link_" + intId + "_button\" class=\"button upload_images\" type=\"button\" value=\"Upload Image\" />"); 
    // Media Upload Button 1 
var custom_uploader; 
mediaButton.click(function(e) { 
    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 
custom_uploader.on('select', function() { 
    attachment = custom_uploader.state().get('selection').first().toJSON(); 
    fName.val(attachment.url); 
    }); 
    //Open the uploader dialog 
    custom_uploader.open(); 
}); 
    var removeButton = $(" <input type=\"button\" class=\"remove\" value=\"-\" />"); 
    removeButton.click(function() { 
     $(this).parent().remove(); 
    }); 
    fieldWrapper.append(fName); 
    fieldWrapper.append(mediaButton); 
    fieldWrapper.append(removeButton); 
    $("#image_upload").append(fieldWrapper); 
}); 

Answer 1

removeButton.click(function() { 
    $(this).parent().remove(); 
    renameDivs(); 
});  

...

function renameDivs() { 
    $('#image_upload div').each(function (k, v) { 
     $(this).attr('id', 'upload-image-set-' + (k + 1)); 
    }); 
} 

Fiddle