title: How can I dynamically wrap elements in a div within another div?
body: <p>I have the following output of WordPress content:</p>
  
  <pre><code>&lt;a href="#"&gt;link1&lt;/a&gt;
  text1
  &lt;br&gt;
  &lt;br&gt;
  &lt;a href="#"&gt;link2&lt;/a&gt;
  text2
  &lt;br&gt;
  &lt;br&gt;
  &lt;a href="#"&gt;link3&lt;/a&gt;
  text
  &lt;br&gt;
  &lt;br&gt;
  &lt;a href="#"&gt;link4&lt;/a&gt;
  text4
  &lt;br&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>I DO NOT have access to edit the content so I'm looking to edit this via jQuery. I need to wrap each link with the text and br before next link in a div and then split it in two columns. So the final result would be something like this:</p>
  
  <pre><code>&lt;div class="col-left"&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;link1&lt;/a&gt;
          text1
          &lt;br&gt;
          &lt;br&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;link2&lt;/a&gt;
          text2
          &lt;br&gt;
          &lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-right"&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;link3&lt;/a&gt;
          text3
          &lt;br&gt;
          &lt;br&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;link4&lt;/a&gt;
          text4
          &lt;br&gt;
          &lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any idea how can I achieve this using jQuery?</p>
  
  <p>I have tried using .wrap() like this:</p>
  
  <pre><code>$('a').wrap( "&lt;div class='item'&gt;&lt;/div&gt;" );
  </code></pre>