jquery onclick show image

Question

I have a cart of images, that I would like to show up one by one in the bag when clicked (Click on the first two). It seems the script I am using only works with one image, not a series of images. Is there an easier way to create this effect?

<script type="text/javascript">
function show_image()
{
      var img = document.createElement("img");
    document.getElementById("shampoo").style.display="block";  


}
</script>

<script type="text/javascript">
function show_image()
{


    document.getElementById("spray2").style.display="block";  

}
</script>

The HTML

<div class="clearfix" id="page">
<div class="title"><img src="assets/yourbag.png" width="296" height="112" alt=""/></div>
<div class="bag"><img src="assets/bag.png" width="472" height="285" alt=""/></div> 
<div class="leftpocket"><img src="assets/pocket_left.png" width="209" height="159" alt=""/></div>
<div class="rightpocket"><img src="assets/pocket_right.png" width="209" height="155" alt=""/></div>
 <div id="shampoo" style="display:none"><img src="assets/bottle.png" width="86" height="206" alt="" id="shampoo"/></div>



<div class="product1">  <input type="button" name="show" id="show" onclick="show_image()"  /></div>
 <div id="spray2" style="display:none"><img src="assets/spraycan.png" width="86" height="206" alt="" id="spray2"/></div>

<div class="product2"> <input type="button" name="spray" id="spray" onclick="show_image()"  /></div>
<div class="product3"><img src="assets/tissues.png" width="73" height="97" alt=""/></div>
<div class="product4"><img src="assets/tp.png" width="90" height="105" alt=""/></div>

<div class="product5"><img src="assets/detergent.png" width="61" height="120" alt=""/></div>
<div class="product6"><img src="assets/laundrypods.png" width="124" height="83" alt=""/></div>
<div class="product7"><img src="assets/sunscreen.png" width="58" height="127" alt=""/></div>
<div class="product8"><img src="assets/babyshapoo.png" width="51" height="119" alt=""/></div>

<div class="product9"><img src="assets/diapers.png" width="74" height="115" alt=""/></div>
<div class="more"></div>
<div class="trade"></div>

Answer 1

Is this what you're trying to do? http://jsfiddle.net/BwjQj/4/

The blue section is your "bag".

add your <img> into the <div> 's with the class item and it should work fine. Do you also want to be able to remove them from the cart?

Answer 2

Scott Rowell already did this for you, but I had already been developing a version when I saw his answer. See if you like my try:

HTML:

<div id="bag1" class='bag'></div>
<div class='prods'>
    <img id="prod1" class="prod" src="http://www.sanbarcomputing.com/images/html5-logo.png"></img>
    <img id="prod2" class="prod" src="http://www.sanbarcomputing.com/images/js.jpg"></img>
</div>

JavaScript:

var prod1Elem = document.getElementById('prod1'),
    prod2Elem = document.getElementById('prod2'),
    bag1Elem = document.getElementById('bag1');

function add() {
    var item = this.cloneNode();
    item.className = item.id + 'Items';
    bag1Elem.appendChild(item);
    item.addEventListener('click', del, false);
}

function del() {
    this.parentNode.removeChild(this);
}

prod1.addEventListener('click', add, false);
prod2.addEventListener('click', add, false);

CSS:

div.prods {
    text-align: center;
}
div.bag {
    text-align: center;
    min-height: 70px;
}
img.prod {
    width: 100px;
    height: 100px;
}
img.prod1Items {
    width: 50px;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}
img.prod2Items {
    width: 50px;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
}

FIDDLE