// source https://jsbin.com/paconuxuqu

clone_boxes.html

<style id="jsbin-css">
#contentContainer {
	/*position: relative;*/
	/*left:100px;*/
	width: 500px;
	height: 300px;
	border: 1px black solid;
	/*overflow: hidden;*/
	background-color: #EEE;
	cursor: auto;
}
#thing {
	position: relative;
  width:40px;
  height:40px;
	/*left: 50px;*/
	/*top: 50px;*/
  background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
  background-repeat: no-repeat;
}
</style>
<div id="contentContainer">
  <div id="thing">
  </div>
</div>
<script id="jsbin-javascript">
var i = 0;
var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
  var cln = theThing.cloneNode(true);
  //cln.id = "new" + i++;
  console.log(cln.id);
  document.querySelector("body").appendChild(cln);
	var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	cln.style.position = "absolute";
  cln.style.left = xPosition + "px";
	cln.style.top = yPosition + "px";  
});
container.addEventListener("mousemove", function(event) {
	var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	theThing.style.left = xPosition + "px";
	theThing.style.top = yPosition + "px";
	}
);
</script>
<script id="jsbin-source-html" type="text/html"><div id="contentContainer">
  <div id="thing">
  </div>
</div>
</script>

<script id="jsbin-source-css" type="text/css">#contentContainer {
	/*position: relative;*/
	/*left:100px;*/
	width: 500px;
	height: 300px;
	border: 1px black solid;
	/*overflow: hidden;*/
	background-color: #EEE;
	cursor: auto;
}
#thing {
	position: relative;
  width:40px;
  height:40px;
	/*left: 50px;*/
	/*top: 50px;*/
  background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
  background-repeat: no-repeat;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var i = 0;
var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
  var cln = theThing.cloneNode(true);
  //cln.id = "new" + i++;
  console.log(cln.id);
  document.querySelector("body").appendChild(cln);
	var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	cln.style.position = "absolute";
  cln.style.left = xPosition + "px";
	cln.style.top = yPosition + "px";  
});
container.addEventListener("mousemove", function(event) {
	var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	theThing.style.left = xPosition + "px";
	theThing.style.top = yPosition + "px";
	}
);</script>

jsbin.paconuxuqu.css

#contentContainer {
	/*position: relative;*/
	/*left:100px;*/
	width: 500px;
	height: 300px;
	border: 1px black solid;
	/*overflow: hidden;*/
	background-color: #EEE;
	cursor: auto;
}
#thing {
	position: relative;
  width:40px;
  height:40px;
	/*left: 50px;*/
	/*top: 50px;*/
  background: url("https://www.docusign.com/sites/default/files/eSign_Icon_2.svg");
  background-repeat: no-repeat;
}

jsbin.paconuxuqu.js

var i = 0;
var theThing = document.querySelector("#thing");
var container = document.querySelector("body");
container.addEventListener("click", function(event) {
  var cln = theThing.cloneNode(true);
  //cln.id = "new" + i++;
  console.log(cln.id);
  document.querySelector("body").appendChild(cln);
	var xPosition = event.clientX - container.getBoundingClientRect().left - (cln.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (cln.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	cln.style.position = "absolute";
  cln.style.left = xPosition + "px";
	cln.style.top = yPosition + "px";  
});
container.addEventListener("mousemove", function(event) {
	var xPosition = event.clientX - container.getBoundingClientRect().left - (theThing.clientWidth / 2);
	var yPosition = event.clientY - container.getBoundingClientRect().top - (theThing.clientHeight / 2);
	// in case of a wide border, the boarder-width needs to be considered in the formula above
	theThing.style.left = xPosition + "px";
	theThing.style.top = yPosition + "px";
	}
);