javascript clone　で複製したinput要素のnameを変更したい

input要素をユーザーが自由に増やして入力欄を増やせるフォームが作りたく、javascriptのcloneを使って増やそうと思ったのですが、cloneではnameの値も複製されてしまい、inputのnameが同じだと中身が上書きされて１件だけ送られる為意図した結果になりませんでした。

なのでnameの要素を変更したいのですが、クローン化したnameの値を一旦取得して、末尾にカウントを追加して書き換えればいいかな？と思いましたがnameの値が取得出来ません。
値が分かっている場合には取得出来るんですが、単純にnameの値自体をしゅとくする方法はありますでしょうか？

１・inputのname属性の値の取得方法はありますか？
name="aabb"と分かっている状態の値ではなく
aabbの値が分かっていない場合で、nameの値を取りに行く方法ですね、なんか説明下手ですいません。

２・元々私がやろうとしている手法以外でもっと適切な方法はありますでしょうか？
inputの親要素全体をクローンしてinputと増やすボタンもクローンしています、クローン後にname属性の値を書き換えて、で行こうとしているのが私の手法です。

javascript
1
2
3$(document).on("click", ".add", function() {
4    $(this).parent().clone(true).insertAfter($(this).parent());
5});
6

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

解決例

html
1<body>
2    <div class="input-group">
3        <div class="parent">
4            <input type="text" name="1">
5            <button class="add">
6                add
7            </button>
8        </div>
9    </div>
10    
11    <script>
12        $(function () {
13            $(document).on("click", ".add", function () {
14                // クローン取得する
15                var clone = $(this).parent().clone(true);
16                // クローンのinputを取得する
17                var input = clone.children('input');
18                // 追加する前にnameを変更する
19                input.attr("name", $('.input-group input').length + 1);
20                // 追加する
21                clone.insertAfter($(this).parent());
22            });
23        });
24    </script>
25</body>