JSFiddle - React, Tailwind, and code Playground

by CR47

HTML

<div id="carousel-editor-slide-0">
    <input type="file" id="edit-image-file" name="files[carousel_image_file]" size="22" class="form-file"/>
</div>

<input type="submit" id="edit-add-slide-button" name="carousel_add_slide" value="Add Slide" class="form-submit"/>

JavaScript

var c = 0;
$('#edit-add-slide-button').click(function (event) {
    event.preventDefault();
    
    var sheep = (jQuery)('#carousel-editor-slide-' + c);
    
    c++;
    
    var klone = (jQuery)(sheep).clone().attr('id', 'carousel-editor-slide-' + c);
    
    (jQuery)(klone).insertAfter(sheep);
    
    (jQuery)('#carousel-editor-slide-' + c + ' :input').each(function (i, obj) {
        
        var field_id = (jQuery)(obj).attr('id');
        
        if (field_id.length > 0) {
            
            var new_id = field_id + '-' + c;
            
            (jQuery)('#carousel-editor-slide-' + c).find('#' + field_id).attr('id', new_id);
        
        }
        
        var field_name = (jQuery)(obj).attr('name');
        var regexPattern = /files\[(.*)\]/g;
        var match = regexPattern.exec(field_name);
        console.log('OLD NAME: ' + field_name);
        if ($.isNumeric(match[1].substring(match[1].length-1))) {
            var iteration = match[1].substring(match[1].length-1);
            var new_name = field_name.replace(iteration, c);
        } else {
            var new_name = 'files[' + match[1] + '_' + c + ']';
        }
        console.log('NEW NAME: ' + new_name);
        
        (jQuery)('#carousel-editor-slide-'+c).find('input[name^="'+field_name+'"]').attr('name', new_name);
    
    });

});