JSFiddle - React, Tailwind, and code Playground

HTML

<script src="add.js" language="Javascript" type="text/javascript"></script>

<div class="wrapper">
				<button id="button" onlick="duplicate()">Click me</button>
			
		<div id="duplicater">	
			<div id="box-margin">	
				<div id="discussion-box">
				</div> <!-- Ends discussion-box -->
			</div> <!-- Ends box-margin -->
		</div>		
				
				
				<div id="circle">
						<div class="cross">
							<div class="cross2">
							</div> <!-- Ends cross2 -->
						</div> <!-- Ends cross -->
					</div> <!-- Ends circle -->
				
</div> <!-- Ends wrapper -->

CSS

.wrapper {
	width: 100%;
}

#discussion-box{
	width: 50%;
	margin: 0 auto;
	height: 200px;
	background-color: #000;
	position: relative;
}

#box-margin {
	margin-top: 20px;
}

JavaScript

document.getElementById('button').onclick = duplicate;


var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}