How to upload more than one file with jQuery and AJAX?

Question

I have specific request that requires input type="file" fields built dynamically. This can vary depending on the number of files that must be uploaded for specific record. So far I was able to develop the code that creates the input fields. However, I'm struggling to collect the uploaded files for each individual input field. Also, those files should be validated as well. Please see example below.

let filejson = ['File1.txt', 'File2.txt', 'File3.txt'];
let arr_elem = [];

$.each(filejson, function(key, filename) {
  arr_elem.push('<div>&#9654; <span id="file-name-' + key + '">' + filename + '</span><input type="file" id="upload-file-' + key + '" class="upload-files" style="width: 100%;" placeholder="' + filename + '"></div>');
});
arr_elem.push('<button id="btn-file-submit">Submit</button>');
$("#file-section").html(arr_elem.join(''));

$("#file-section").on("click", "#btn-file-submit", function() {
  let files = $(".upload-files");
  files.each(function(i, obj) {
    console.log(i);
    console.log(obj.files[i]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="file-section"></div>

In the example above try to upload the file in second or third input file field. Those files will return as undefined. Only first input field is capable of uploading the file. Is there a way to catch all input field files? Thanks.