jQueryでidタグを動的に指定したいです

Question

お世話になってます。

jQueryを使用して、ボタンを押す度に同じ<div>タグを動的に生成しているのですが、そのdivにidを振って
最後に追加された、<div>タブの後に追加するようにしたいと考えております。

そこで、以下の様に実装したのですが、上記のような動作はできませんでした。
原因としては、afterのidの指定の仕方が原因だと考えております。

jQueryで、idを動的に指定することは可能でしょうか？

◆現在の実装方法

    jQuery('#add').click(function () {
        //初期表示時点で<div id="testWrap">は、表示されているため、
        //次のidは[2]からカウントしております。
        var count = 2;
        //時間プランオプションの追加
        jQuery('div#testWrap' + count).after('<div id="testWrap' + count + '"></div>');
        i++;
});

試しに、idの指定方法を試したところ、<div>タグを生成することは可能でしたが、

    jQuery('#add').click(function () {
        //初期表示時点で<div id="testWrap">は、表示されているため、
        //次のidは[2]からカウントしております。
        var count = 2;
        //時間プランオプションの追加
        jQuery('div#testWrap1').after('<div id="testWrap' + count + '"></div>');
        i++;
});

当然ながら、<div id="testWrap1">の下に、最後に追加した<div>タグが表示されてしまいます。
また、afterで追加しているHTMLについては、idの番号も正常に振られているので問題ないと思われます。

よろしくお願いします。

Answer 1

.afterを.appendにしてみてはいかがでしょうか。

###追記
idも連番にしたいのですね。
i++でなんとかしようとしているのかはわかりませんが、
こだわりがなければグローバル変数を定義してあげて、
グローバル変数をインクリメントして上げればよいと思います。

var count = 2;

jQuery('#add').click(function () {
  jQuery('div#testWrap1').append('<div id="testWrap' + count + '"></div>');
  count++;
});

###さらに追記

<div id="testWrap">
  <div id="testWrap1"></div>
</div>

jQuery(document).ready(function() {
  var count = 2;
  var $target = $('#testWrap');

  jQuery('#add').on('click', function(e) {
    $target.append('<div id="testWrap' + count + '"></div>');
    
    count++;
  });
  
});

Comments

[lazy]

mukutaJapさん、回答ありがとうございます。
appendで実装したところ、初期表示で表示されている<div>タグの中に含まれてしまいました
そのかわり、idの指定に変数が使えることがわかったのでそちらで対応しました。

i++に関しては、記載もれです、結果として以下のようになりました。
ありがとうございました。

jQuery(document).ready(function () {
var i=1
var divTestIdName = 'div#testWrap' + i;
//初期表示時点で<div id="testWrap">は、表示されているため、
//次のidは[2]からカウントしております。
var count = 2;
jQuery('#add').click(function () {

var divTestIdName = 'div#testWrap' + i;
//時間プランオプションの追加
jQuery(divTestIdName).after('<div id="testWrap' + count + '"></div>');
i++;
divTestIdName = 'div#testWrap' + i;
count++;
});
});

[mukkun]

なるほどですね。やりたいことがわかりました。

冗長でわかりづらいと思いますので、
回答を編集致しました。

htmlの「testWrap1」にラップして上げる形で「testWrap」を追加してあげると、
見た目良くなると思います。

「testWrap」が不要の場合はjavascriptの
var $target = $('#testWrap');
を
var $target = $('#testWrap1');
に変更して、
.append
を
.after
に変更すればやりたいことができるのではないかと思います。