動的に追加したDOM要素をさらに動的に操作したい

Question

このようなHTMLソースがあるのですが、諸事情でこのソースを直接弄る事ができません。

  <img src=image/xxx.png class="profile-image">

  <div class="profile-columns">
    <p>テキスト</p>
  </div>

  <div class="profile-columns">
    <p>テキスト</p>
  </div>
  
  <div class="profile-columns">
    <p>テキスト</p>
  </div>

  <div class="profile-columns">
    <p>テキスト</p>
  </div>

  <div class="profile-columns">
    <p>テキスト</p>
  </div>

  <div class="profile-columns">
    <p>テキスト</p>
  </div>

  <div class="profile-columns">
    <p>テキスト</p>
  </div>

しかしこのHTMLをcssで整形したく、.profile-columns全てを一つのdivで囲み、さらにそのdivとimageを一つのdivで囲みたいのです。
理想としてはこのようなコードにしたいです。

<div class="profile-section">
  
  <img src=image/xxx.png class="profile-image">

  <div class="profile-wrapp">

    <div class="profile-columns">
      <p>テキスト</p>
    </div>

    <div class="profile-columns">
      <p>テキスト</p>
    </div>
    
    <div class="profile-columns">
      <p>テキスト</p>
    </div>

    <div class="profile-columns">
      <p>テキスト</p>
    </div>

    <div class="profile-columns">
      <p>テキスト</p>
    </div>

    <div class="profile-columns">
      <p>テキスト</p>
    </div>

    <div class="profile-columns">
      <p>テキスト</p>
    </div>

  </div>
  
</div>

そこでまずはjQueryで

$('.profile-columns').wrapAll('<div class="profile-wrapp" />');

を記述し、.profile-columnsをdivで囲むことには成功しました。
しかし次に.profile-wrappとimageをdivで囲む為に、

$('.profile-wrapp .profile-image').wrapAll('<div class="profile-section" />');

と記述したところ、動作しませんでした。
.profile-wrappを動的に追加しているからであろうということはわかるのですが、他にどのような方法でこの二つの要素を囲むのかがわかりません。 そもそもそのような方法はあるのでしょうか？潔く諦めるしかないのでしょうか・・。 アドバイスいただければ幸いです。

Answer 1

$(function(){
  $('div.profile-columns').wrapAll('<div class="profile-wrapp">');
  $('img,.profile-wrapp').wrapAll('<div class="profile-section">');
});

Comments

[Fushi_me]

カンマが必要だったのですね、、、、初歩的なミスでお恥ずかしい限りです。
助かりました！ありがとうございます！