jquery onchange function problem

creates a copy of html elements

You obviously know what jQuery.clone() does, but you want to prevent it from "duplicating"?

Does this get you any closer?

http://jsfiddle.net/t28sv760/14/

Yes, I would like to prevent it from duplicating, if possible.  I know, sounds crazy.
Check out the onchange
http://jsfiddle.net/isogunro/t28sv760/13/

So what to you want to show up in #tabs div if not a copy of .controlGroup? Do you want just the text inside the select options to show up as list items?

Yes, text inside the select options.

As I toggle back an forth, is there a way to remove what I duplicated before I add it again when the drop down is "Punctuality"?

Something like this might get you closer based upon you wanting to remove what you duplicated before you add it again when the drop down is "Punctuality".

      $("#DashboardToggle select").change(function()
      {
        alert("HEllo Dashboard");
            var val = $(this).find("option:selected").val();
            if(val == "GLChart")
            {
            alert("Show GLChart");
            }
            if(val == "Punctuality")
            {
                  alert("Show Punctuality");
            var copyFilterBy = $(".controlGroup").clone();
            $(copyFilterBy).appendTo("body");
            $(".controlGroup" ).first().remove();
            }
      });

alert("outside");
$("#tabs").prepend("<ul id='tabIndex'><li>"+copyFilterBy+"</li></ul>");

This works for me.  I have another similar question that I will post in a few minutes.
Thnaks