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";

    }

);