Content from item gets deleted - debugging

Question

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