title: jQuery each() not working correctly with wrapAll() and wrap()
body: <p>I've created a simple triptych. The content is entered on a CMS so I have have to wrap the divs with JS. The issue is that when I wrap the contents of 2 triptychs everything is wrapped into one triptych. Am i using jQuery's <code>each()</code> function correctly? Or what am I doing wrong? Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
   $(".triptych").each(function () { 
    $('.field--name-field-topic-1-icon, .field--name-field-topic-1-title').wrapAll('&lt;div class="iconContainer iconContainer1"&gt; &lt;/div&gt;');
    $('.field--name-field-topic-2-icon, .field--name-field-topic-2-title').wrapAll('&lt;div class="iconContainer iconContainer2"&gt;&lt;/div&gt;');
    $('.field--name-field-topic-3-icon, .field--name-field-topic-3-title').wrapAll('&lt;div class="iconContainer iconContainer3"&gt;&lt;/div&gt;');
   
    $('.iconContainer').wrapAll('&lt;div class="iconsContainer"&gt; &lt;/div&gt;');
   
    $('.iconContainer1').wrap('&lt;a role="button" class="topic1-filter tab" data-tabid="topic1"&gt;&lt;/a&gt;');
    $('.iconContainer2').wrap('&lt;a role="button" class="topic2-filter tab" data-tabid="topic2"&gt;&lt;/a&gt;');
    $('.iconContainer3').wrap('&lt;a role="button" class="topic3-filter tab" data-tabid="topic3"&gt;&lt;/a&gt;');
   
    $('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').wrapAll('&lt;div class="tripctychContent-container"&gt;&lt;/div&gt;');
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .field--name-field-topic-2-content,.field--name-field-topic-3-content,.field--name-field-topic-1-content {
       display: none;
   }
  
   .showTopicContent {
      display: block;
  }
  
  .hideMoreText {
      display: none;
  }
  
  .iconsContainer {display: flex;justify-content: space-between;}
  p{text-align: center;}
  .iconsContainer a {flex: 1; margin-right: 5px;}
  .triptych img { width: 150px;margin: 0 auto;display: block;height: 150px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;div class="triptych"&gt;
          &lt;div class="inner"&gt;
              &lt;div class="field--name-field-topic-1-icon"&gt;&lt;img src="https://fakeimg.pl/300/" &gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-1-title field--type-text-long"&gt;&lt;p&gt;Topic 1 title&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-2-icon"&gt;&lt;img src="https://fakeimg.pl/300/" &gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-2-title field--type-text-long"&gt;&lt;p&gt;Topic 2 title&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-3-icon"&gt; &lt;img src="https://fakeimg.pl/300/" &gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-3-title field--type-text-long"&gt;&lt;p&gt;Topic 3 title&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-1-content"&gt;&lt;p&gt;Topic 1 content...&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-2-content"&gt;&lt;p&gt;Topic 2 content...&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-3-content"&gt;&lt;p&gt;Topic 3 content...&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;h1&gt;this is a random div that should be between the 2 tripticks&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="triptych"&gt;
          &lt;div class="inner"&gt;
              &lt;div class="field--name-field-topic-1-icon"&gt;&lt;img src="https://fakeimg.pl/300/" &gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-1-title field--type-text-long"&gt;&lt;p&gt;Triptych 2 Topic 1 title&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-2-icon"&gt;&lt;img src="https://fakeimg.pl/300/" &gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-2-title field--type-text-long"&gt;&lt;p&gt;Triptych 2 Topic 2 title&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-3-icon"&gt; &lt;img src="https://fakeimg.pl/300/" &gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-3-title field--type-text-long"&gt;&lt;p&gt;Triptych 2 Topic 3 title&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-1-content"&gt;&lt;p&gt;Triptych 2 Topic 1 content...&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-2-content"&gt;&lt;p&gt;Triptych 2Topic 2 content...&lt;/p&gt;&lt;/div&gt;
              &lt;div class="field--name-field-topic-3-content"&gt;&lt;p&gt;Triptych 2 Topic 3 content...&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>