I am having trouble positioning a cloned div using jQuery. Even when I try to add CSS to the cloned element using the .css() method, it only affects the text and not the entire element.
Here is a link to the fiddle for reference: https://jsfiddle.net/emilychews/xuup6va1/3/
If you click on the blue div, it will create a clone of itself.
For easy access, here is the code snippet:
$('#testdiv').click(function() {
$(this).clone()
.insertAfter('#testdiv');
});#wrapper {
width: 100%;
height: 100%;
}
#testdiv {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
box-sizing: border-box;
padding: 10px;
background-color: blue;
color: white;
height: 350px;
width: 300px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="testdiv">
<h1>I am a div</h1>
<p>with a blue background</p>
</div>
</div>