Get file name if files loaded in jquery doesn't work

Question

I want users to upload multiple files in PHP.

HTML

<input name="file[]" type="file" class="multi_files" style="margin: 0px 0px 15px;" />
<button class="add_more">Add More Files</button>

When the user selects a file, I need to display a button Add more file. Otherwise, hide the button. When loading the page, I make the button with the class #add_morehidden via jquery.Initially, when the first file is loaded, add another button to get display.This works fine. Starting from the second case, I need to show add moreonly when downloading the next file. help me

$('input:file.multi_files').change(
        function(){
            $('input:file').removeClass('multi_files');
            if ($(this).val()) {
                $('.add_more').show();
            } 
            else
            {
                $('.add_more').hide();

            }
        }
        );
  $('.add_more').click(function(e){
    e.preventDefault();
   //my logic is I will check immediate input file has file or not with this condition.
  //But this condition always give me undefined value.
    if($(this).closest('input:file').val())
      {

        $(this).before("<input name='file[]' type='file' class='multi_files'/>");
      }  

});

I also need to add a delete button for each file.

Answer 1

$('.add_more').hide();
$('input:file.multi_files').change(
        function(){
            $('input:file').removeClass('multi_files');
            if ($(this).val()) {
                $(this).after("<button class='remove'>X</button><br/>");
                $('.add_more').show();
            } 
            else
            {
                $('.add_more').hide();

            }
        }
        );

  $('body').on('click','.remove',function(){
   
    if(document.getElementsByClassName('file').length > 1 ){
      $(this).prev('input:file').remove();
      $(this).next('br').remove();
      $(this).remove();
     }
  });

  $('.add_more').click(function(e){
    e.preventDefault();
    var filePresent = document.getElementsByClassName('file')[document.getElementsByClassName('file').length-1].files.length;
    if(filePresent >0  ){
        $(this).before("<input name='file[]' type='file' class='multi_files file'/><button class='remove'>X</button><br/>");
      }  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input name='file[]' type='file' class='multi_files file'/>
<button class="add_more">Add More</button>

Run codeHide result