How to move the desired element on click?

Question

JavaScript

Created 3 img previews with figcaption elements, when you click on any, it is displayed on a large one. Pictures are duplicated normally, and there was a problem with the transfer of the figcaption element. When clicked, the first clicked one is copied and remains there.

code pen

<div class="thumbnails">
  <figure>
    <img class="small-img" src="https://picsum.photos/200/200/?image=12"/>
    <figcaption class="small-fig">Описание 1</figcaption>
  </figure>
  <figure>
    <img class="small-img" src="https://picsum.photos/200/200/?image=22"/>
    <figcaption class="small-fig">Описание 2</figcaption>
  </figure>
  <figure>
    <img class="small-img" src="https://picsum.photos/200/200/?image=33"/>
    <figcaption class="small-fig">Описание 3</figcaption>
  </figure>
</div>
<div class="bigpicture">
  <figure class="main">
    <img class="big-img" src="https://picsum.photos/200/200/?image=12"/>
    <figcaption class="big-fig">Описание 1</figcaption>
  </figure>
</div>

$(document).ready(function() {
  $('.small-img').click(function(){
    var srcimg  = $(this).attr('src');
    var content = $(this).siblings('.small-fig').html();   
    $('.big-img').attr('src', srcimg);
    $('.big-fig').replaceWith(content);
  });
});

Answer 1

Replace replaceWith with html: . $('.big-fig').html(content);