Adding/removing option from multiselect with jquery
<p>I have jquery that will add an item to a select list and change the background color to indicate that it has been added (the select list is not visible). When I click the plus it adds the item to the list and changes the background to green. When I click it a second time it removes the item and color. This works once. If I repeat the cycle it stops working. Any ideas why that might be?</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;&lt;span id='add'&gt; + &lt;/span&gt;this is a test
 &lt;/li&gt;
&lt;/ul&gt;
&lt;select multiple="multiple" id="destination"&gt;&lt;/select&gt;

$(document).ready(function () {
  $("#add").click(function () {
var color = $("#add").css("background-color");
if (color == "transparent") {
  $("#add").css("background-color", "green");
  $("#destination").append('&lt;option value="1"&gt;New option&lt;/option&gt;');
} else {
  $("#add").css("background-color", "transparent");
  $("#destination option[value='1']").remove();
}
});
});
</code></pre>
