JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="col">
    <div class="block">
      Click me
    </div>
  </div>
</div>

CSS

.wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 200px;
		height: 400px;
		background-color: green;
		}
		.col {
		position: relative;
		}
		.block {
		position: absolute;
		top: 0;
		left: 0;
		width: 50px;
		height: 50px;
		background-color: gold;
		}
		.block--fixed{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

JavaScript

let clone;
		function wow(){
			$('.block').off('click').on('click', function(e){
				let _this = $(this);
				clone = _this.clone();
				if(_this.closest('.wrapper').length>0){
					clone.addClass('block--fixed');
					_this.closest('.wrapper').after(clone);
					_this.remove();
					wow();
				}else{
					clone.removeClass('block--fixed');
					clone.appendTo('.wrapper');
					_this.remove();
					wow();
					}
			});
		}
		wow();