入力フォームで複数入力可能項目の欄を自動的に増やしたい

Question

お世話になっております。

表題の通り、送信フォームで複数入力可能項目を入力したら自動的にその欄が増えるようにしたいと考えております。

どのようにJavaScript(JQuery)を組めばよいかがわからず難儀しております。
お分かりになる方いらっしゃいますでしょうか

下記のように組んだのですが、うまく行きませんでした

<form>
  <div class="form-menu">
    <input type="text" name="menu01" class="form-text">
  </div>
  <div class="form-menu">
    <input type="text" name="menu02[]" class="form-text">
  </div>
  <div class="form-menu">
    <input type="text" name="menu03[]" class="form-text">
  </div>
</form>

<script>
  $('input.form-text').blur(function(){
    //複数入力可能項目は末尾2桁が'[]'
    if($(this).attr("name").slice(-2)=='[]'){
        var original = $(this);
        
        original.parent().append(original);
    }
});
</script>

Comments

[kei344]

「.form-menu」ごと増えるのでしょうか？それとも input のみ増えるのでしょうか。

[kutu]

inputだけでお願いします

[kutu]

というより.form-menuの中身が増える感じです

Answer 1

  $('input.form-text').blur(function(){
    //複数入力可能項目は末尾2桁が'[]'
    if($(this).attr("name").slice(-2)=='[]'){
        $(this).clone(true).insertAfter(this);
    }
});
```**動くサンプル：**[https://jsfiddle.net/ph4r6n2q/](https://jsfiddle.net/ph4r6n2q/)


---

【clone(true) - jQuery 日本語リファレンス】
[http://semooh.jp/jquery/api/manipulation/clone/true/](http://semooh.jp/jquery/api/manipulation/clone/true/)