select optgroup with jquery selector stops working after first selection
<p>I'm getting very wierd behavior when I empty a div then append another div to it using selected based on selected option. Hard to explain. When you select and option it works, but when you come back and select the same optiongroup again, it stops working completely. Please have a look at his example: <a href="http://jsbin.com/akeboz/" rel="nofollow">http://jsbin.com/akeboz/3/</a></p>

<p>It's probably me doing it tha wrong way again :P but what do you think is wrong with it?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;style&gt;
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
&lt;/style&gt;
&lt;script&gt;
$(document).ready(function(){
  $('#carSelect').change(function(){
    currentBrand = $(this).find('option:selected').data('brand');
    $('#carContainer').empty();
    $('#car_'+currentBrand).show().appendTo('#carContainer');
  });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

  &lt;form&gt;

     &lt;select id="carSelect"&gt;
          &lt;optgroup label="Swedish Cars"&gt;
            &lt;option data-brand='volvo' value="volvo"&gt;Volvo&lt;/option&gt;
            &lt;option data-brand='saab' value="saab"&gt;Saab&lt;/option&gt;
          &lt;/optgroup&gt;
          &lt;optgroup label="German Cars"&gt;
            &lt;option data-brand='mercedes' value="mercedes"&gt;Mercedes&lt;/option&gt;
            &lt;option data-brand='audi' value="audi"&gt;Audi&lt;/option&gt;
          &lt;/optgroup&gt;
      &lt;/select&gt;

      &lt;div id="carContainer"&gt;&lt;/div&gt;

  &lt;/form&gt;

  &lt;div style="display:none;"&gt;

      &lt;div id="car_audi"&gt;
          audi stuff
      &lt;/div&gt;

      &lt;div id="car_mercedes"&gt;
          mercedes stuff
      &lt;/div&gt;

  &lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>
