動的に生成された要素をグループ分けしたい

Question

前提・実現したいこと

PHPで動的に生成されたdivとulの親要素をjQueryで生成したいです。

該当のソースコード

●処理前

    <div>
        <div class="group_name">グループ1</div>
        <ul class="list">
            <li>リスト１</li>
            <li>リスト２</li>
        </ul>
        <div class="group_name">グループ2</div>
        <ul class="list">
            <li>リスト１</li>
            <li>リスト２</li>
        </ul>
        （上記を繰り返し）
    </div>

上記のものを下記のようにグループ分けするjQueryを書きたいです。

●処理後

    <div>
        <div class="group1">
          <div class="group_name">グループ1</div>
          <ul class="list">
            <li>リスト１</li>
            <li>リスト２</li>
          </ul>
        </div>
        <div class="group2">
          <div class="group_name">グループ2</div>
          <ul class="list">
            <li>リスト１</li>
            <li>リスト２</li>
          </ul>
        </div>
        （上記を繰り返し）
    </div>

試したこと

$(function(){	
    //divとulそれぞれにidを追加
    $('.group_name , .list').each(function(i){
    $(this).attr('id','child' + (i+1));
    });
    //id指定で要素をつつみこむ（ここ、規則性あるけど別の書き方はできないのでしょうか？）
    $("#child1,#child2").wrapAll('<div id="group1" />');
    $("#child3,#child4").wrapAll('<div id="group2" />');
　　　・・・
});

↓実行結果

    <div>
        <div class="group1">
          <div class="group_name" id="child1">グループ1</div>
          <ul class="list" id="child2">
            <li>リスト１</li>
            <li>リスト２</li>
          </ul>
        </div>
        <div class="group2">
          <div class="group_name" id="child3">グループ2</div>
          <ul class="list" id="child4">
            <li>リスト１</li>
            <li>リスト２</li>
          </ul>
        </div>
        （上記を繰り返し）
    </div>

上記の方法で一応形にはなるのですが、

・wrapAll()の部分は規則性があるのに手打ち（別の書き方はないのか？）
・そもそも子要素１つ１つにidを与えなくてもいい書き方はないのか？

以上のような疑問を抱いています。
不慣れなもので拙い部分もあるかと思いますが、ご回答いただけると嬉しいです！

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[yuzuki-chan]

なるほど、ありがとうございます！

Answer 1

    $('.group_name').each(function(index, element) {
        var target = $(element);
        target.add(target.next()).wrapAll($('<div></div>').attr('id', 'group' + (index + 1).toString()));
    });

Answer 2

こんな感じですか？

$(function(){
  $(".group_name+.list").each(function(x){
    $(this).prev(".group_name").wrap("<div class='group"+(x+1)+"'>");
    $(this).appendTo($(this).prev("div"));
  });
});