title: Adding optgroups dynamically using jQuery
body: <pre><code>&lt;select id="myElement" multiple="multiple"&gt;
    &lt;option value="1"&gt;Category Type&lt;/option&gt;
    &lt;option value="158"&gt;itemOne&lt;/option&gt;
    &lt;option value="157"&gt;itemTwo&lt;/option&gt;
    &lt;option value="7"&gt;My Type&lt;/option&gt;
    &lt;option value="20"&gt;itemThree&lt;/option&gt;
    &lt;option value="21"&gt;itemFour&lt;/option&gt;
    &lt;option value="22"&gt;itemFive&lt;/option&gt;
    &lt;option value="8"&gt;Category Yet Another&lt;/option&gt;
    &lt;option value="31"&gt;itemCheese&lt;/option&gt;
    &lt;option value="32"&gt;itemBrain&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I need to dynamically convert this so that "Category" options (anything that doesn't start with "item") is an optgroup, wrapping whaterver comes after it until the next Category option, so the above would end up looking like:</p>
  
  <pre><code>&lt;select id="myElement" multiple="multiple"&gt;
    &lt;optGroup label="Category Type"&gt;
      &lt;option value="158"&gt;One&lt;/option&gt;
      &lt;option value="157"&gt;Two&lt;/option&gt;
    &lt;/optGroup&gt;
    &lt;optGroup label="My Type"&gt;
      &lt;option value="20"&gt;Three&lt;/option&gt;
      &lt;option value="21"&gt;Four&lt;/option&gt;
      &lt;option value="22"&gt;Five&lt;/option&gt;
    &lt;/optGroup&gt;
    &lt;optGroup label="Category Yet Another"&gt;
      &lt;option value="31"&gt;Cheese&lt;/option&gt;
      &lt;option value="32"&gt;Brain&lt;/option&gt;
    &lt;/optGroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>How can I iterate over this and change values to acheive the desired effect using jQuery?</p>