I'm trying to absolutely position a cloned div with jQuery. When I add CSS to the cloned element with the .css() method it only moves the text (even if I copy all of parent element's CSS into this object).

I have a fiddle here : https://jsfiddle.net/emilychews/xuup6va1/3/

If you click on the blue div it creates a clone.

I've also put the code below for quick reference.

HTML:

1. <div id="wrapper">
2.   <div id="testdiv">
3.     <h1>I am a div</h1>
4.     <p>with a blue background</p>
5.   </div>
6. </div>

CSS:

1. #wrapper {width: 100%; height: 100%;}
2. #testdiv {
3.   display: flex;
4.   flex-direction: column;
5.   justify-content: center;
6.   align-items: center;
7.   margin-top: 20px;
8.   box-sizing: border-box;
9.   padding: 10px;
10.   background-color: blue;
11.   color: white;
12.   height: 350px;
13.   width: 300px;
14. }

jQuery:

1. $('#testdiv').click(function() {
2.   $( this ).clone()
3.     .insertAfter('#testdiv');
4. });

Any help would be awesome,

Emily