Question

I have a problem of finding the right function , or logic to resolve this problem for adding layers to a div (transperant png).

This is a part of a “configurator” for potential products.

semi-working demo (shirt example) can be find here :

http://jsfiddle.net/obmerk99/9t4f4/16/

If I will use append() – like you can see it commented out in the code – it will append endlessly – how can i remove the previous option (from the same option group only)

1 – What is the right function to use here ?

2 – How can I make the “groups” division without resort into multiple dedicated divs (i will have 50-60 options..) – or in another scenario, how to create those automatically ?

3 – How to make it work for radio / checkboxes ??

EDIT I

Lame´s word explanation :

I have “groups” of options, all referring to the same product.
Each group “option” corresponds to a transparent png with the option´s image or respective part.

Foe example, if i configure a car, I will have a group of “wheels” options with images of different wheels, a Group of “windows” options with different windows , a Group of “color” options etc. etc…
In the end , they stack up and make the complete image – configured.
It is a bit like those sites making avatars, or cartoonish images where one can choose head, muctache, background, glassess, hair etc.

Answer 1

Maybe you can have a main image showing what never changes, on top of that have an image for each option, the images could be in the markup or added when the option is first selected.

Here is a mod to the fiddle, I think its what you’re trying to achieve fiddle I added an overlay image and span for each option.

EDIT:
Automating the switch would be trivial, just give the display and information elements ids ending in the element that affects it
E.g.

<select id="optionX"> <img id="img-optionX"> <span id="desc-optionX">

see fiddle

I think you should use radio buttons(if you don’t want to use the select) instead of the check boxes because they can be grouped easily.

see fiddle