Unable to include a lottie-player tag with .wrapAll()

Question

On this code each time there is an h2 on article I take all of the content from the h2 till the next h2 and wrap it on a section.

<article>
 <h2>Lottie Files</h2>
 <div class='lottie-wrapper>
   <lottie-player src='' background="transparent" speed="1"></lottie-player>
  </div>
</article>

$('article h2').each(function () {
  $(this).nextUntil('h2').addBack().wrapAll('<section />')
})

But for some reason if there is the <lottie-player> tag, the code removes it from the DOM.

It only happens when I include lottieFiles interactivity script in conjunction with the above snippet

https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js

This is happening on WordPress only on a simple html is not a problem.

If I remove a parent div called .lottie-wrapper from the wrap then it works, but not just calling the lottie-player tag directly

$('article h2').each(function () {
  $(this)
    .nextUntil('h2')
    .addBack()
    .not('.lottie-wrapper')
    .wrapAll('<section />')
})

But of course I want the lottie-player inside

Answer 1

This was pretty bizarre, it only happened on WordPress and only when I use the script

https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js

Together with the jQuery wrapAll(). I fixed it by using an older version of the script https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js