why when I add a node clone, it acts differently to adding the same div to the html

I am creating an infinite sliding carousel. when I add the below, after the animation there is a little glitch with the carousel jumping and returning to the start.

If I remove the Javascript and manual add another “box-container prim” the carousel works perfectly. I dont want to editing 2 divs, so I want to clone the div. Why is the behavior different when you clone the div? when you inspect the code the divs are exactly the same?

*{
  padding:0;
  margin:0;
}
.wrapper{
  width:100vw;
  height:100px;
  
  display:flex;
  
  overflow:hidden;
}
 

.box-container {
  display:flex;
width:100%;
  height:100%;
  }

.box{
   width:200px;
  border:1px solid black;
}


.prim {
  animation:scroll 10s  linear infinite;
}

<div class="wrapper">

<div class="box-container prim">


<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
  
  </div>

  
</div>

<script>
let x = document.querySelector('.box-container')
let clone=x.cloneNode(true);
x.after(clone)



</script>

Adding manual html, and cloning with js