html内の連想配列のnameをリネームしたい。

Question

下記のようなHTMLが存在する時、追加のボタンを押した時に最後の入力欄を元に複写し、nameを変えたいのですが、どのようにすればよいか、色々やってみたのですがわからなく質問させていただきました。
いわゆるアイテム入力欄の追加をフロントサイドで行いたいのです。
JavascriptあるいはjQueryに詳しい方にぜひご教授頂きたく。

<div id="divisionList">
    <div class="card division-item">
        <input name="division[0][name]">
        <input name="division[0][age]">
        <div>
            <input type="checkbox" name="division[0][peculiarity][]">
            <input type="checkbox" name="division[0][peculiarity][]">
        </div>
    </div>
    <div class="card division-item">
        <input name="division[1][name]">
        <input name="division[1][age]">
        <div>
            <input type="checkbox" name="division[1][peculiarity][]">
            <input type="checkbox" name="division[1][peculiarity][]">
        </div>
    </div>
    <!-- ここに追加される -->
</div>
<button type="button" id="add">追加</button>

$(add).on('click', function() {
  var $divisionTemplate = $('.division-item').last().clone();  // division-itemの最後が複写される
  
  // ここにname変更のロジック  

  $divisionTemplate.appendTo(divisionList); // 入力欄を最後に追記
});

厄介なのがnameが連想配列であり、連番を持っていること。
コピーした$divisionTemplate内のdivision[数字]...をリネームしたいのです。
上記の場合、４箇所、$divisionTemplate内のdivision[1]...がdivision[2]...になる。
.findあたりで引っ掛けてreplaceかと思っていたのですが、難しく。。。

参考にしたサイトなど
jQueryでフォームを動的に追加／削除
jQueryのセレクタに正規表現・属性フィルタを使う方法！

何かヒントやその他参考にサイトなどでもいただけるとありがたいです。
よろしくお願いします。

Answer 1

各グループにある要素と[division]は決まってるんですよね？
$(".division-item").lengthでグループの個数がわかるので、そこから1つ1つ要素を指定してattr()でname変更していけば良いと思います。

例：

$(add).on('click', function() {
  const g_count = $(".division-item").length;
  const $divisionTemplate = $('.division-item').last().clone();

  $($divisionTemplate.find("input")[0]).attr("name","division["+g_count+"][name]");
  $($divisionTemplate.find("input")[1]).attr("name","division["+g_count+"][age]");
  $($divisionTemplate.find("input[type=checkbox]")).attr("name","division["+g_count+"][peculiarity][]");
  $divisionTemplate.appendTo(divisionList); 
});

Comments

[tomomo]

解決しました。回答いただきありがとうございました。

[m.ts10806]

解決されたようで何よりです。

Answer 2

ちょっと雑ですが

<script>
$(function(){
  $(add).on('click', function() {
    var cl = $('.division-item').last().clone();  // division-itemの最後が複写される
    var num=parseInt(cl.find('input:eq(0)').attr('name').match(/[([0-9]+)]/)[1]);
    cl.find('input').attr('name',function(){
      return $(this).attr('name').replace(new RegExp("\["+num+"\]"),"["+(num+1)+"]");
    });
    $('#divisionList').append(cl);
});});
</script>
<button type="button" id="add">追加</button>
<div id="divisionList">
    <div class="card division-item">
        <input name="division[0][name]">
        <input name="division[0][age]">
        <div>
            <input type="checkbox" name="division[0][peculiarity][]">
            <input type="checkbox" name="division[0][peculiarity][]">
        </div>
    </div>
    <div class="card division-item">
        <input name="division[1][name]">
        <input name="division[1][age]">
        <div>
            <input type="checkbox" name="division[1][peculiarity][]">
            <input type="checkbox" name="division[1][peculiarity][]">
        </div>
    </div>
    <!-- ここに追加される -->
</div>

Comments

[tomomo]

解決しました。ありがとうございます。
解決したのも嬉しいですが、こんなにあっさりかけるもんなんだなと非常に勉強になりました。