Basically, I have 4 images on a page that I need to clone, and each clone needs to be placed into a table with 4 cells.
The behavior is this: once you click on one of the images, a border is placed around it as if it were selected. Next, a clone of that image is placed into one of the cells of a table.

Here is the JavaScript:

var beatlesImages = document.getElementsByTagName("img");




function selectImage(element, beatleName)
{

switch (beatleName)

{
case "John":
beatlesImages[0].style.border = "7px groove";

beatlesImages[1].style.border = "1px solid";
beatlesImages[2].style.border = "1px solid";
beatlesImages[3].style.border = "1px solid";

break;

case "Paul":
beatlesImages[1].style.border = "7px groove";

beatlesImages[0].style.border = "1px solid";
beatlesImages[2].style.border = "1px solid";
beatlesImages[3].style.border = "1px solid";

break;

case "George":
beatlesImages[2].style.border = "7px groove";

beatlesImages[0].style.border = "1px solid";
beatlesImages[1].style.border = "1px solid";
beatlesImages[3].style.border = "1px solid";

break;
case "Ringo":
beatlesImages[3].style.border = "7px groove";

beatlesImages[0].style.border = "1px solid";
beatlesImages[1].style.border = "1px solid";
beatlesImages[2].style.border = "1px solid";


break;
}


}

function copyImage(element)
{
//John Image

var johnClone = beatlesImages[0];
var newJohn = johnClone.cloneNode(); // Clone John image

var beatleCells = element.parentNode; //reference the tr parent node
var beatles = beatleCells.firstChild; //reference the td child nodes that will be replaced

var newCell = document.createElement('td'); //create a new td
newCell.appendChild(newJohn);
//alert(newCell.childNodes);
beatleCells.replaceChild(newCell, element);

//Paul
var paulClone = beatlesImages[1];
var newPaul = paulClone.cloneNode(); // Clone John image

var beatleCells = element.parentNode; //reference the tr parent node
var beatles = beatleCells.lastChild //reference the td child nodes that will be replaced

var newCell = document.createElement('td'); //create a new td
newCell.appendChild(newPaul);
//alert(newCell.childNodes);
beatleCells.replaceChild(newCell, element);


// George
var georgeClone = beatlesImages[2];
var newGeorge = georgeClone.cloneNode(); // Clone John image

var beatleCells = element.parentNode; //reference the tr parent node
var beatles = beatleCells.lastChild //reference the td child nodes that will be replaced

var newCell = document.createElement('td'); //create a new td
newCell.appendChild(newGeorge);
//alert(newCell.childNodes);
beatleCells.replaceChild(newCell, element);

}

Here is the HTML:
<h3>Put the Beatles (John, Paul, George, and Ringo) in Their Boxes</h3>

<div id="beatle_grid">

<table border='3'>
<tr>
<td width="200px" height="200px" onclick="copyImage(this);">John</td>
<td width="200px" height="200px" onclick="copyImage(this);">Paul</td>
</tr>
<tr>
<td width="200px" height="200px" onclick="copyImage(this);">George</td>
<td width="200px" height="200px" onclick="copyImage(this);">Ringo</td>
</tr>

</table>

<form>
<p><input type="button" value="Remove Selected Image from Grid" onclick="removeImage();"></p>
</form>

</div>

<div id="beatle_list">
<p><img src="http://profperry.com/Classes20/JavaScript/beatles_john.jpg" onClick="selectImage(this, 'John');"><br >John</p>
<p><img src="http://profperry.com/Classes20/JavaScript/beatles_paul.jpg" onClick="selectImage(this, 'Paul');"><br >Paul</p>
<p><img src="http://profperry.com/Classes20/JavaScript/beatles_george.jpg" onClick="selectImage(this, 'George');"><br >George</p>
<p><img src="http://profperry.com/Classes20/JavaScript/beatles_ringo.jpg" onClick="selectImage(this, 'Ringo');"><br >Ringo</p>
</div>

So my problem is that l need to code a function that
selects the image from the Beatle Image list and "remembers" which
image was selected so that the other function, to copy an image into
the table, will work correctly. As is it coded now, only the clone for the John image can be placed into the table cells. How can I reference the other clones?
Thanks.