【jQuery】ボタンクリックでフォームを追加・採番で番号を連番にしたい

Question

前提・実現したいこと

ボタンをクリックすることによって、フォームの項目を複製できるように実現したいです。

現状、+をクリックするとフォームが複製され、採番で番号が連番になるように実装はできました。
しかし問題点が2点あり、そちらが解決しないので質問をさせていただきました。

【問題点】
①追加ボタン（＋）をクリックした後、追加のフォームに元の入力内容がそのまま反映されてしまう
（ラジオボタンの選択肢や、コメントやテキストの入力がそのまま引き継がれてしまう）
②ファイル選択後の名前の反映（.filename）が＋で追加した項目で、出力されない
（初めから表示されているファイル選択は正常に表示される）

HTML

<div class="items">
    <div class="item">
        <div class="left">

            <!-- ファイル選択 -->
            <div class="file">
                <label class="file_wrap">
                    <input type="file" name="file[0]" class="fileinput">ファイルを選択</label>
                <span class="filename"></span>
            </div>

            <!-- 文字入力 -->
            <label class="text" for="photo_area[0]">写真のタイトル</label>
            <input type="text" id="photo_area[0]" name="photo_area[0]" placeholder="" value="">


            <!-- ラジオボタン  -->
            <label class="text">写真の評価</label>
            <div class="radio">

                <label for="status-a[0]">
                    <input type="radio" name="status[0]" value="1" id="status-a[0]"><span>A</span></label>

                <label for="status-b[0]">
                    <input type="radio" name="status[0]" value="2" id="status-b[0]"><span>B</span></label>
                <label for="status-c[0]">
                    <input type="radio" name="status[0]" value="3" id="status-c[0]"><span>C</span></label>

                <label for="status-d[0]">
                    <input type="radio" name="status[0]" value="4" id="status-d[0]"><span>D</span></label>
            </div>
        </div>

        <!-- テキストエリア -->
        <div class="right">
            <label for="comment[0]" class="textarea-tit">コメント</label>
            <textarea class="textarea" name="comment[0]" id="comment[0]"
                placeholder=""></textarea>
        </div>
    </div>
</div>
<div class="add_btn-block">
    <button id="add_btn" type="button">＋</button>
</div>

JS

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script type="text/javascript">
　　//＋ボタンクリックでフォームを複製
    document.getElementById('add_btn').addEventListener ('click', ()=> {
  let
    parent = document.querySelector ('.items'),
    childs = parent.querySelectorAll ('.item'),
    len = childs.length,
    item = childs[0].cloneNode (true),
    a = [...item.querySelectorAll ('*[for]')],
    b = [...item.querySelectorAll ('*[name]')],
    c = [...item.querySelectorAll ('*[id]')],
    f = item.querySelector ('input[type="file"]'),
    reg0 = /^.+[\d+]$/,
    reg1 = /[\d+]$/,
    str = `[${len}]`;

  a.forEach (a=> reg0.test (a.getAttribute('for')) && a.setAttribute ('for', a.getAttribute('for').replace (reg1, str)));
  b.forEach (a=> reg0.test (a.name) && a.setAttribute ('name', a.name.replace (reg1, str)));
  c.forEach (a=> reg0.test (a.id) && a.setAttribute ('id', a.id.replace (reg1, str)));
  f.value = '';
  parent.appendChild (item);
}, false);


//ルートから取得
document.addEventListener ('change', event=> {
  let fs = document.querySelectorAll ('input[type="file"]');
  let vals = [...fs].map (f=> f.value).join (", ");
  console.log(vals);
});

</script>

<script>
//ファイルから選択の選択ファイル名を表示
 $('.file .fileinput').on('change', function () {
      var file = $(this).prop('files')[0];
      $(this).closest('.file').find('.filename').text(file.name);
　});
</script>

Comments

[m.ts10806]

本件との直接関連性はないですが、jQuery利用するなら一通りjQueryの記法で書かれたほうがコードも分かりやすくなるかと思います。

[kii.32]

なるほどです。JavaScriptもjqueryも勉強がたらず、こちらで質問をさせていただき、何とか出てきた記載でして、勉強しながら統一する方向に致します。。！

Answer 1

フォームがわかれないならラジオボタンのnameをitem毎に
ユニークにしないと競合します
値を引き継ぎたくないならクリアする処理をいれるだけです

Comments

[kii.32]

ご回答ありがとうございます。
まだまだ勉強不足でして、勉強させていただきたいのですが、
uniqやclearは今回のコードであれば、どの段階で入れればよいでしょうか、、、？

[yambejp]

サンプルです
https://codepen.io/yambejp/pen/LYbmWNy

[kii.32]

確認が遅くなりすみません。。。
サンプルありがとうございます！

ファイル名を出力する部分の.filenameのファイル名の表示が追加の2つ目以降うまく動かないようなのですが、
（作ってくださったサンプルで言う「ファイルを選択」の右側に表示される.filenameのファイル名）

これは複製された.filenameも同じクラス名の為でしょうか。。。？

[yambejp]

失礼ました機能を見落としていました
sample書き換えましたが、追加したdomの処理へのonは
ちょっとだけ工夫が必要です

[kii.32]

ありがとうございます！無事動きました！
教えてくださったおかげで、大変勉強になりました。
感謝いたします。
yambejp様をベストアンサーとさせていただきます。