<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');
    		});
    	});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.