Issues cloning element with jQuery clone - html

Question

I am attempting to create an animation using jQuery but I am having an issue, the animation is broken down into cloning a div and placing in the DOM, changing the divs ID, animating the original div and then deleting the div this all works fine but I then assign the cloned element the original divs ID(since this is used for repeating the animation) and the cloned element moves to where the deleted element was.
Is this how IDs are supposed to work.
I have tried using .remove() on the original element and I tried assigning the original element to a variable and the using .remove() on that and I have tried changing its id then deleting that id none of these have worked.
//animation is here
$("#SecondPage").css("transform-origin", "center left");
$("#Corner").css({
"display" : "none",
"visibility" : "hidden"
})
//making the page to go underneath
$("#SecondPage").css("z-index","3");
let NewPage = $("#SecondPage").clone(true, true);
$(NewPage).attr("id", "NewSecondPage");
$(NewPage).css({
"left" : 0,
"top" : 0,
"position":"absolute",
"z-index": "1"
})
$('#SecondPageContainer').append(NewPage);
//after delete secondpage and change new cloned page to second page
//very important this makes sure that the rotation is centered around the left side of the page rather than its center making the page rotation effect
$({
deg: 0
}).animate({
deg: 180
}, {
duration: 2000,
step: function (now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$('#SecondPage').css({
transform: 'rotateY(' + now + 'deg)'
});
},
done : function(){
$("#Corner").css({
"display" : "block",
"visibility" : "visible"
})
}
});
setTimeout(function () {
$("#FirstPage").attr("src", FirstPage);
$("#SecondPage").remove();
$("#NewSecondPage").attr("id", "SecondPage");
$("#SecondPage").attr("src", SecondPage);
//this will be called when the image is rotated
}, 2000);