<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<center><div id="parent">
<p>Parent Cointainer</p>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<div id="child">
<p>Child Cointainer</p>
<div class="box">Box 4</div>
</div></center>
.box {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
cursor: pointer;
display: inline-flex;
align-items:center;
justify-content:center;
font-size:30px
}
#parent, #child {
border: 5px solid black;
padding: 10px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
font-size: 20px;
width:75%;
}
$(document).ready(function() {
$('.box').click(function() {
$(this).appendTo('#child');
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.