Move multiple child elements from one place to another in the same order with jQuery

Question

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.

Here we can see two blocks of code. In the first one, we can see see figcaption element. So,that element should be moved from the first code block to the second one, but in the corresponding order. That means, figcation from the first "li" element should go to second code block inside first ".lg-item" element. Second figcation should go to second ".lg-item" element, and so on.

<figure id="happyfiles-gallery-l52f6u" class="happyfiles-gallery lightbox">
    <ul class="wrapper">
        <li class="item" data-src="https://www.someurl.com/image-1.jpg">
            <figure><a href="https://www.someurl.com/image-1.jpg">
                    <img src="https://www.someurl.com/image-1-300x300.jpg"></a>
                <figcaption class="figcaption">Image 1 caption text</figcaption>
            </figure>
        </li>
        <li class="item" data-src="https://www.someurl.com/image-2.jpg">
            <figure><a href="https://www.someurl.com/image-2.jpg">
                    <img src="https://www.someurl.com/image-2-300x300.jpg"></a>
                <figcaption class="figcaption">Image 2 caption text</figcaption>
            </figure>
        </li>
        <li class="item" data-src="https://www.someurl.com/image-3.jpg">
            <figure><a href="https://www.someurl.com/image-3.jpg">
                    <img src="https://www.someurl.com/image-3-300x300.jpg"></a>
                <figcaption class="figcaption">Image 3 caption text</figcaption>
            </figure>
        </li>
        <li class="item" data-src="https://www.someurl.com/image-4.jpg">
            <figure><a href="https://www.someurl.com/image-4.jpg">
                    <img src="https://www.someurl.com/image-4-300x300.jpg"></a>
                <figcaption class="figcaption">Image 4 caption text</figcaption>
            </figure>
        </li>
        <li class="item" data-src="https://www.someurl.com/image-5.jpg">
            <figure><a href="https://www.someurl.com/image-5.jpg">
                    <img src="https://www.someurl.com/image-5-300x300.jpg"></a>
                <figcaption class="figcaption">Image 5 caption text</figcaption>
            </figure>
        </li>
    </ul>
</figure>

...

<div class="lg" style="width:100%; height:100%">
    <div class="lg-inner" style="transition-timing-function: ease; transition-duration: 600ms;">
        <div class="lg-item"></div>
        <div class="lg-item"></div>
        <div class="lg-item"></div>
        <div class="lg-item"></div>
        <div class="lg-item"></div>
    </div>
</div>

Thank you very much. All the best!