title: Move multiple child elements from one place to another in the same order with jQuery
body: <p>I am trying to move captions from gallery thumbnails, to lightbox (so, they would be visible only on enlarged images). However, I wasn't able to do that. Does anyone know how would that be possible? I would appreciate that, very much.</p>
  <p>Here we can see two blocks of code. In the first one, we can see see <em>figcaption</em> element. So,that element should be moved from the first code block to the second one, but in the corresponding order. That means, <em>figcation</em> from the first &quot;li&quot; element should go to second code block inside first &quot;.lg-item&quot; element. Second <em>figcation</em> should go to second &quot;.lg-item&quot; element, and so on.</p>
  <pre><code>&lt;figure id=&quot;happyfiles-gallery-l52f6u&quot; class=&quot;happyfiles-gallery lightbox&quot;&gt;
      &lt;ul class=&quot;wrapper&quot;&gt;
          &lt;li class=&quot;item&quot; data-src=&quot;https://www.someurl.com/image-1.jpg&quot;&gt;
              &lt;figure&gt;&lt;a href=&quot;https://www.someurl.com/image-1.jpg&quot;&gt;
                      &lt;img src=&quot;https://www.someurl.com/image-1-300x300.jpg&quot;&gt;&lt;/a&gt;
                  &lt;figcaption class=&quot;figcaption&quot;&gt;Image 1 caption text&lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
          &lt;li class=&quot;item&quot; data-src=&quot;https://www.someurl.com/image-2.jpg&quot;&gt;
              &lt;figure&gt;&lt;a href=&quot;https://www.someurl.com/image-2.jpg&quot;&gt;
                      &lt;img src=&quot;https://www.someurl.com/image-2-300x300.jpg&quot;&gt;&lt;/a&gt;
                  &lt;figcaption class=&quot;figcaption&quot;&gt;Image 2 caption text&lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
          &lt;li class=&quot;item&quot; data-src=&quot;https://www.someurl.com/image-3.jpg&quot;&gt;
              &lt;figure&gt;&lt;a href=&quot;https://www.someurl.com/image-3.jpg&quot;&gt;
                      &lt;img src=&quot;https://www.someurl.com/image-3-300x300.jpg&quot;&gt;&lt;/a&gt;
                  &lt;figcaption class=&quot;figcaption&quot;&gt;Image 3 caption text&lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
          &lt;li class=&quot;item&quot; data-src=&quot;https://www.someurl.com/image-4.jpg&quot;&gt;
              &lt;figure&gt;&lt;a href=&quot;https://www.someurl.com/image-4.jpg&quot;&gt;
                      &lt;img src=&quot;https://www.someurl.com/image-4-300x300.jpg&quot;&gt;&lt;/a&gt;
                  &lt;figcaption class=&quot;figcaption&quot;&gt;Image 4 caption text&lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
          &lt;li class=&quot;item&quot; data-src=&quot;https://www.someurl.com/image-5.jpg&quot;&gt;
              &lt;figure&gt;&lt;a href=&quot;https://www.someurl.com/image-5.jpg&quot;&gt;
                      &lt;img src=&quot;https://www.someurl.com/image-5-300x300.jpg&quot;&gt;&lt;/a&gt;
                  &lt;figcaption class=&quot;figcaption&quot;&gt;Image 5 caption text&lt;/figcaption&gt;
              &lt;/figure&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/figure&gt;
  
  ...
  
  &lt;div class=&quot;lg&quot; style=&quot;width:100%; height:100%&quot;&gt;
      &lt;div class=&quot;lg-inner&quot; style=&quot;transition-timing-function: ease; transition-duration: 600ms;&quot;&gt;
          &lt;div class=&quot;lg-item&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;lg-item&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;lg-item&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;lg-item&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;lg-item&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Thank you very much.
  All the best!</p>