<input type="file">にてファイルを選択せずキャンセルを押した際のjQueryでの制御について

Question

前提・実現したいこと

以下のようなフローでファイルをアップできるようなページを作成しています。(jQueryを使用)

・html上の「ローカルファイルを選択」ボタンをクリック
・「ローカルファイルを選択」とは別の要素の見た目上見えなくしてある<input type=file>を.trigger("click")を使用して間接的に発火
・発火させた<input type="file">のイベントによりPCのファイルを選択し「開く」を押す
・ファイル情報を取得しファイル名を<div>input-file-boxという要素を作成後そこに出力
・次回分のinput要素を先ほど使用したinputの隣に追加
以上
再度同じフローを踏んでファイルを選択すると2つ目以降のファイル名が横にどんどん並ぶように追加されていくというような結果を想定しています。
以下ののコードにてファイルを選択した際は想定通りの出力結果を得られたのですが、
ファイルを選択するタイミングでキャンセルを押した後、もう一度最初の手順からファイルを選択し「開く」を押すとinput要素が2つ作成されてしまう事象が起きてしまいます。

推測としてはクリックイベントの後にchangeイベントが実行されず残ってしまい、
次の新しいクリックイベントを実行した際に止まっていたイベントが同時に動き要素が2つ作成されてしまっているのかと考えています。
ただ、その後の対処に詰まってしまい質問をさせていただくに至りました。
アドバイスのほどよろしくお願いいたします...！

発生している問題・エラーメッセージ

該当のソースコード

    
    let addLocalFile = function(){
        let activeFileNum = $('#origin-file-input-elm').find('.input-local-file').length;
        
        $('#local-file-' + activeFileNum).trigger("click");
        popInActivate();
        
        $('#local-file-' + activeFileNum).on('change', function(){
                let addFileNum = activeFileNum + 1;
                let fileBoxElm = '<div class="input-file-box" id="input-file-box-' + activeFileNum + '"><div class="clip-icon"></div><div class="file-name"></div><button class="file-delete-icon" id="fille-' + activeFileNum + '></button></div>';
                $('#js-input-files-wrapper').append(fileBoxElm);
                let fileObj = $('#local-file-' + activeFileNum).prop('files')[0];
                $('#input-file-box-'+ activeFileNum).find('.file-name').text(fileObj.name);
                
                let fileInputElm = '<input class="input-local-file" id="local-file-' + addFileNum + '" type="file"></input>'
                $('#clone-origin-file-input-elm').append(fileInputElm);
        });
    }
$("#js-open-local-file").click(addLocalFile);

            <form class="form" action="">
                <div class="wrapper">
                    <div class="input-files-wrapper" id="js-input-files-wrapper">
　　　　　　　　　　　　　　<!---　このコメント内の要素にファイル名を出力してファイルを選択するごとに横に並べる
　　　　　　　　　　　　　　<div class="input-file-box" id="input-file-box-1">
                            <div class="clip-icon"> </div>
                            <div class="file-name">ファイル名.zip</div>
                            <button class="file-delete-icon" id="fille-delete-1"></button>
                       -->
                        </div></div>
                    <div class="clone-origin-file-input-elm" id="clone-origin-file-input-elm">
                        <input class="input-local-file" id="local-file-1" type="file">
                        <!--- ここに input type=file を追加していく--->
                    </div>
                    
                </div>
                
            </form>
            <button id="js-open-local-file" type="button">
                ローカルファイルを選択
            </button>

試したこと

changeイベントを addLocalFileの外側に出して試したりもしましたが、
そうするとactiveFilleNumの受け渡しがうまくできずファイル選択画面が開かない状態でした。
(同期的に処理すればよろしいのでしょうか...?ただそのやり方もイマイチ理解できずわからない状態なので、もしそうだとしたらその方法もお教えいただければ幸いです。)

    let activeFileNum = '';
    let addLocalFile = function(){
        activeFileNum = $('#clone-origin-file-input-elm').find('.input-local-file').length;
        console.log(activeFileNum);
        $('#local-file-' + activeFileNum).trigger("click");
        popInActivate();
        
    }

    $("#js-open-local-file").click(addLocalFile);

    $('#local-file-' + activeFileNum).on('change', function(){
            let addFileNum = activeFileNum + 1;
            let fileBoxElm = '<div class="c-input-file-box" id="input-file-box-' + activeFileNum + '"><div class="clip-icon"></div><div class="file-name"></div><button class="file-delete-icon" id="fille-delete-' + activeFileNum + '></button></div>';
            $('#js-input-files-wrapper').append(fileBoxElm);
            let fileObj = $('#local-file-' + activeFileNum).prop('files')[0];
            $('#input-file-box-'+ activeFileNum).find('.file-name').text(fileObj.name);
            
            let fileInputElm = '<input class="input-local-file" id="local-file-' + addFileNum + '" type="file"></input>'
            $('#clone-origin-file-input-elm').append(fileInputElm);
    });

補足情報（FW/ツールのバージョンなど）

jQuery 3.5.0
ブラウザはIE11まで対応できればと思います。

Answer 1

2つの方法で解決できました。

1つ目

https://teratail.com/questions/324474
詳しくはこちらで質問させていただきました。
input type="file"のキャンセルを選択した際のイベントをなんとか取得し、
それによって条件分岐させることで処理を完結させ次回以降の二重実行を防ぎます。

2つ目

change イベントをoffすることによって前の実行で残っていたイベントを削除し、
改めて新しいイベントでファイルを選択した際のイベントを実行するというもの。

let addLocalFile = function(){
        let activeFileNum = $('#origin-file-input-elm').find('.input-local-file').length;
        console.log(activeFileNum);
        $('#local-file-' + activeFileNum).trigger("click");
        popInActivate();
        
        $('#local-file-' + activeFileNum).off('change');//コレを追加し残っていたイベントを消す
        $('#local-file-' + activeFileNum).on('change', function(){
                let addFileNum = activeFileNum + 1;
                let fileBoxElm = '<div class="c-input-file-box" id="input-file-box-' + activeFileNum + '"><div class="clip-icon"></div><div class="file-name"></div><button class="file-delete-icon" id="fille-delete-' + activeFileNum + '></button></div>';
                $('#js-input-files-wrapper').append(fileBoxElm);
                let fileObj = $('#local-file-' + activeFileNum).prop('files')[0];
                $('#input-file-box-'+ activeFileNum).find('.file-name').text(fileObj.name);
                
                let fileInputElm = '<input class="input-local-file" id="local-file-' + addFileNum + '" type="file"></input>'
                $('#origin-file-input-elm').append(fileInputElm);
        });
    }
    $("#js-open-local-file").click(addLocalFile);