Generate Movable Copies Of Images

What I'm trying to do is when I clic on a image, I make a copy and I can take this copy everywhere the mouse goes and put it in a specific area. But when I choose other image the last one disapear.This happens because I'm using the same object to display it, an <img> object inside of a <div> to make it able to move. I just changing the src atribute of <img>,so, my question is how can I make copies of the same image . Here is some of my

<div id="floatimg" style="position:absolute; left:0px; top:0px;">
<img id="test">
</div>


<img src="ball1.gif" id="ball1" width="50" height="50"
<img src="ball2.gif" id="ball2" width="50" height="50"
<img src="ball3.gif" id="ball3" width="50" height="50"
<img src="ball4.gif" id="ball4" width="50" height="50"
My javascript functions

function setobj(objeto){
if(document.all){
flagsetobjetos=objeto;
document.
}
}

function captureMousePosition(q){
var myobjeto=document.getElementById('floatimg');
var testid=document.getElementById('test');

xMousePos = event.clientX-50;
yMousePos = event.clientY-50;

myobjeto.style.left=xMousePos;
myobjeto.style.top=yMousePos;
testid.src=sourceobj.src;
}