How to add a second field for file upload in the form, if it is entirely in JS?

Good day dear.
There is a script form smartlid. It is made entirely in JS, that is, the form itself is in the familiar html wrapper outstay. And if to be more exact, the html view of the shell shape is formed only on the output (in the browser).
Here is the code:

Here's the developer site with the source: SmartLid — script callback
The problem is this: cannot add a second field to download the file. Tried everything, exactly just how lacking my knowledge of JS, and I have them unfortunately little.
Asking for help and advice on how to make the second field in the form to download the file?
March 23rd 20 at 18:52
2 answers
March 23rd 20 at 18:54
Solution
Found the answer yourself.
Thank you Guru for the help in this question.
Those who do may be useful, I attach the modified code js, php handler to finish is not difficult:


Just simply had to specify a different fileName.
And no one could tell.
Well, okay, maybe religion is not allowed.)))
religion is not allowed

You provided a large enough piece of code to understand that it takes time and effort. The most that can be expected - which will push in the right direction. But will not decide for you tasks free. - zane_Kautzer commented on March 23rd 20 at 18:57
March 23rd 20 at 18:56
According to the documentation of this script(library) this is not possible.
You will have to expand the original library, before that, having thoroughly understood her work. In this case, you
likely to lose the ability to update this library.

Solution:
1. To understand code, to expand the way you want - it will be a long time, and without the proper level of skill - almost impossible.
2. To find a more flexible solution where there is a possibility of customization of the form.
3. Give the task to freelancing.
The fact is that the field I added with no problems:
if (defaults.requestFormAddFile) {
 var fileWrapper1 = $('<div>').attr({
 class: 'smartlid__file-wrapper'
});
 var fileName = $('<input>').attr({
 class: 'smartlid__smartlid input__file-name',
 placeholder: 'Attach a file',
 disabled: 'disabled',
});
 let inputFileLabel = $('<label>').attr({
 for: 'smartlid__input_file1',
 class: 'smartlid__smartlid label__label_file'
}).html('Select');

 let inpFile = $('<input>').attr({
 class: 'smartlid__smartlid input__input_file',
 type: 'file',
 name: 'files1[]',
 id: 'smartlid__input_file1'
 }).change(function () {
 fileName.val($(this).val().replace(/.*\\/, ""));
});
fileWrapper1.append(fileName).append(inputFileLabel).append(inpFile);
 }

In line 663 added new ones .append from fileWrapper1.
Field added to the form.
But when the file is selected, only one field and the second is blank.
That's what I can't understand. That does not fully work out the field? - hertha.Stoltenber commented on March 23rd 20 at 18:59
@hertha.Stoltenber, Read about the events in js and understand. - zane_Kautzer commented on March 23rd 20 at 19:02

Find more questions by tags Web DevelopmentJavaScript