Content from item gets deleted

I want to drag the elements from one another but when the element is added to the other list ( or even to the list itself ), some content ( the Lottie part ) gets deleted

I tried a workaround with clone() but it gets "bugged" if the element is returned to the same list

I provided the link to the CodePen where the entire shenanigan is displayed in its full glory

https://www.codepen.io/robert12r/pen/WNJEYEo

HTML code:

  <div class="container-fluid g-0">
    <div class="row">
      <div id="sortable1" class="connectedSortable col-6 d-flex flex-column justify-content-center">
        <div id="e_1" class="d-flex justify-content-center mt-1 btn btn-primary">
          <lottie-player id="lotthie" src="https://assets9.lottiefiles.com/datafiles/gUENLc1262ccKIO/data.json" background="transparent" speed="1" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
        </div>
        <div id="e_2" class="mt-1 btn btn-primary">Drag 2</div>
        <div id="e_3" class="mt-1 btn btn-primary">Drag 3</div>
        <div id="e_4" class="mt-1 btn btn-primary">Drag 4</div>
        <div id="e_5" class="mt-1 btn btn-primary">Drag 5</div>
        <div id="e_6" class="mt-1 btn btn-primary">Drag 6</div>
      </div>
      <div id="sortable2" class="connectedSortable col-6 d-flex flex-column justify-content-center">
        <div id="e_7" class="mt-1 btn btn-primary">Righty</div>
      </div>
    </div>
  </div>

jQuery code:

$("#sortable1").sortable({
    revert: true,
    connectWith: "#sortable2"
});

$("#sortable2").sortable({
    revert: true,
    connectWith: "#sortable1"
});

My goal is to move the element from one list to the other with the Lottie still functional