jQuery - Select/unselect multiselect options with replacement divs
<p>I'm working on a modal multiselect replacement that takes a <code>&lt;select&gt;</code> element and replaces it and it's <code>&lt;option&gt;</code>s with divs.  I am a jQuery novice, and I've reached a point now where I have the replacement working perfectly but with a few hiccups in the functionality.</p>

<p>The desired functionality is as follows:</p>

<ol>
<li><p>You click <strong>"Choose Your Options"</strong> which creates a modal dialog
containing a list of <code>div.option</code>s which have been populated using
<code>.text()</code> from each <code>&lt;option&gt;</code>.</p></li>
<li><p>When you choose an option from the modal, it applies a class of
<code>.selected</code> to the <code>div.option</code> selects the corresponding <code>&lt;option&gt;</code>
and appends the <code>.text()</code>of that option to an <code>&lt;li&gt;</code> inside a <code>&lt;ul&gt;</code>
outside of the modal.</p></li>
<li><p>When you click on one of the newly generated <code>&lt;li&gt;</code>s, the <code>&lt;li&gt;</code>
itself should <code>.fadeOut();</code> and <code>.remove();</code> while making the
corresponding <code>&lt;option&gt;</code> unselected.</p></li>
<li><p><strong>IF</strong> you click "Choose Your Options" after this point, you should be able to select/unselect <code>&lt;option&gt;</code>s and have it reflect accordingly in the <code>&lt;ul&gt;</code>.</p></li>
</ol>

<p>As of now, everything happens correclty except for step 4.</p>

<p><strong>I've included my code here: <a href="http://jsfiddle.net/zumwalt/HB7HJ/" rel="nofollow">jsfiddle.net/zumwalt/HB7HJ/</a>.</strong>  </p>

<p>Once again, I'm very novice at jQuery/js, so I'm positive that I've taken some steps in creating this that don't make sense.</p>

<p>Any help is greatly appreciated!</p>
