Bootstrap File Upload clone

Question

I am using Krajee's Bootstrap file upload plugin for file input & I am trying to clone the file input so that users can add multiple files from different folders rather than selecting it at once. The issue I am facing is after the file input gets cloned, it behaves weirdly. I have setup a fiddle for this. When I am trying to reset or clear the file input, it always clears the first input. Have been trying a lot of options & after spending so many hours decided to post here. JS Fiddle: https://jsfiddle.net/asfg9mna/

Any ideas as to how to make it work fine? Issue is whenever i click on delete icon, it always deletes the first input's file & not the current one.

HTML code:

<form role="form" id="upload-form" class="form-horizontal">
    <div class="addFiles text-nowrap">
        <div class="appendClass form-group" style="margin-bottom: 1.5%;">
            <label class="col-md-2 control-label" for="input-2">Select Files</label>
            <div class="col-md-9 col-9-input uploadFile">
                <input placeholder="Select Files" id="input-2" name="input2[]" type="file" class="file input-upload" data-show-upload="false" data-show-preview="false">
            </div>
            <button type="button" class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files">
                <i class="fa fa-plus"> </i>
            </button>
            <button type="button" class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block">
                <i class="fa fa-times"> </i>
            </button>
        </div>
    </div>
</form>

JS Code:

//Clone Upload File Div
$(document).on('click', ".addFilesBtn", function(e) {
    e.preventDefault();
    $(this).tooltip('hide');
    $(".appendClass:first").clone(true).appendTo(".addFiles");
    $('.closeFilesBtn').show();
    $('.closeFilesBtn:first').hide();
    //$fileInput = $('.input-upload');
    //$fileInput.replaceWith( $fileInput = $fileInput.clone( true ) );
    //$('.input-upload').fileinput('clear').fileinput();
    $('.uploadFile').next().trigger('reset');
});

Answer 1

Here is jsfiddle

Update your js code like this,

$(document).on('click', ".addFilesBtn", function(e) {
  e.preventDefault();
  $(this).tooltip('hide');
  parent_element = $(".appendClass:first");
  $(".input-upload").fileinput('destroy');
  element = parent_element.clone();
  element.appendTo(".addFiles");
  $(".input-upload").fileinput();

  $('.closeFilesBtn').show();
  $('.closeFilesBtn:first').hide();
  //$fileInput = $('.input-upload');
  //$fileInput.replaceWith( $fileInput = $fileInput.clone( true ) );
  //$('.input-upload').fileinput('clear').fileinput();
  //$('.uploadFile').next().trigger('reset');
});

And please write your code to update ids of every elements which will be cloned.

EDIT

$(document).on('click', ".addFilesBtn", function(e) {
  e.preventDefault();
  $(this).tooltip('hide');
  $(".has_clone").each(function() {
    $this = $(this);
    var parent_element = $(this).closest(".appendClass");
    var $element = parent_element.clone();
    $element.find(".file-input").remove();
    var counter = parseInt($("#counter").val()) + 1;
    $element.find(".col-md-9").append('<input placeholder="Select Files" id="input-' + counter + '" name="input2[]" type="file" class="file dynamic_clone input-upload " data-show-upload="false" data-show-preview="false">');
    $("#counter").val(counter);
    $element.appendTo(".addFiles");
    $(".input-upload").fileinput({
      'showPreview': true
    });
  });
$('.closeFilesBtn').show();
  $('.closeFilesBtn:first').hide();
});

//Close addFile div - Upload files
$(document).on('click', ".closeFilesBtn", function(e) {
  e.preventDefault();
  $(this).closest(".appendClass").hide();
});

Thanks