Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also changes due to the animation effect. How can I prevent the already animated div from moving when a new div is created?
<div class="wrapper">
<div class="car"></div>
</div>
<button id="button">spawn new car</button>
$(document).ready(function() {
var car = $('.car');
car.animate({left:"+=367px"}, 2000);
car.animate({top:"-=247px"}, 2000);
$("#button").click(function () {
$(".wrapper").append('<div class="car"></div>');
var car = $('.car');
car.animate({left:"+=367px"}, 2000);
car.animate({top:"-=247px"}, 2000);
});
});