input fileに追加ボタンを作ったのですが、追加したinput fileに2枚目のファイルを貼り付けることができません

Question

現在アーティストのプロフィールを作るシステムを作っています。
そこで、例えばSNSのQRコードを添付する時に、
1つ目のinput fileはHTML上に出しておいて、
２つ目以降は追加ボタンを押して自身で増やしてもらおうと思っています。
しかし、追加ボタンを作ったところ、２つ目以降のinput fileに上手くファイルを添付することができません。
原因を見つけていただき、解決策を教えていただきたいです。

<div class="sns1">
<input type="text" class="form-control" placeholder="SNS名">
<input type="text" class="form-control" placeholder="ユーザー名">
<input type="file" id="sns" value="アーティスト写真"/>
<img id="output-message2">
<input type="button" value="＋" class="add pluralBtn">
<input type="button" value="－" class="del pluralBtn">
</div>

$('#sns').on('change', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#output-message2").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
});

$(document).on("click", ".add", function() {
    $(this).parent().clone(true).insertAfter($(this).parent());
});
$(document).on("click", ".del", function() {
    var target = $(this).parent();
    if (target.parent().children().length > 1) {
        target.remove();
    }
});

Answer 1

cloneではなくcreateElementsiteしてみるとか

const inputElem = document.createElement("input");
inputElem.setAttribute("type","file");

https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

あとはidが重複しないようにする必要もあります。

Comments

[Ray4702]

ありがとうございます！
idが重複しないようにするためには配列を活用するなどでしょうか？
そして、htmlとjavascript両方コードを変える必要がありますでしょうか？

[yuki84web]

見た感じJSだけで良いような。
idは、単純な数値増加で良いなら、グローバルなカウント変数でも用意しておくとか。

[Ray4702]

ありがとうございます！
javascriptは使い始めて間もないので苦労します、、、
グローバルカウント変数調べてみます！