JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">

    <div class="item">
        
        <a href="template_upload_template_json.php" class="button-1">Upload</a>
        <div class="status-media status-upload"></div>
        <form action="template_upload_xml.php" method="post" enctype="multipart/form-data">
            <input type="file" name="file[]" class="upload-file" style="visibility:hidden;" multiple="" />
            <input type="hidden" name="database_insert" value="root_templates"/>
            <input type="hidden" name="file_path" value="local/views/includes/templates/"/>
        </form>

    </div>

</div>


<div class="media">

    <div class="item">
    
        <a href="image_upload_page_json.php" class="button-2">Upload</a>
        <div class="status-media status-upload"></div>
        <form action="image_upload_page_xml.php" method="post" enctype="multipart/form-data">
            <input type="file" name="file[]" class="upload-file" style="visibility:hidden;" multiple="" />
            <input type="hidden" name="page_id" value="1"/>
            <input type="hidden" name="category_id" value="1"/>
        </form>
        
    </div>

</div>

JavaScript

$(document).ready(function(){
  
        
        $('.button-1').upload_file_html5({objectSuperparent:'.list'});
        $('.button-2').upload_file_html5({objectSuperparent:'.media'});
        //alert('1');

});

(function($) {
 
    // Attach this new method to jQuery
    $.fn.upload_file_html5 = function(options) {
        
        var defaults = {
                objectSuperparent: '.media'
            }
        
        var options = $.extend(defaults, options);
        var o = options;
        
        var $cm = this.each(function() {
            
            // <a> button is the object in this case.
            var object = $(this);
                
            // Get other info from the element belong to this object group.
            var object_href = object.attr('href');
            var object_parent = object.parent();
            //alert(this.className);
            
            $(this).click(function(e) {
                
                
                $(".upload-file", object_parent).val(null).click();
                
                return false;
            });
            
            // Trigger ajax post when ever the file is changed by the user.
            $(".upload-file",object_parent).change(function() {
                
                // <input> is the object in this case.
                var object = $(this);
                
                var object_form = object.parent();
                var object_superparent = object.parents(o.objectSuperparent).css({background:'red'});
                var path_config = $($cm.selector,object_superparent).attr('href');
                var path_post = object_form.attr('action');
                
                alert($cm.selector);
                //alert(path_config);
            });
            
        });  
    };
         
})(jQuery);