title: Removing and adding options from a group of select menus with jQuery
body: <p>This is a little more complicated than the title makes it out to be, but here are the essential business rules:</p>
  
  <ol>
  <li>There are three select menus on the
  page, each filled with the same
  options and values.</li>
  <li>There will always be three select
  menus.</li>
  <li>There will always be the same number
  of options/values in each select
  menu.</li>
  <li>Selecting a question in any of the
  menus will remove that question as an option from
  the other two menus.</li>
  <li>Re-selecting a different question
  from any of the menus will bring
  back the question that was
  previously removed from the other
  two menus at the index it was at previously.</li>
  </ol>
  
  <p>I've tried this a few different ways, and the thing that is killing me is number 5. I know that it wouldn't be inserted at the exact index because some questions may have already been removed, which would reorder the index. It basically needs an insertBefore or insertAfter that puts it in the same "slot".</p>
  
  <p>Even if you don't post any code, some thoughts on how you might approach this would be extremely helpful. The select menus and jQuery look something like this, but I've had numerous tries at it in different variations:</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(function() {
      $(".questions").change(function() {
          var t = this;
          var s = $(t).find(":selected");
  
          // Remove, but no "insert previously selected" yet...
  
          $(".questions").each(function(i) {
              if (t != this) {
                  $(this).find("option[value=" + s.val() + "]").remove();
              }
          });
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select name="select1" class="questions"&gt;
      &lt;option value="1"&gt;Please select an option...&lt;/option&gt;
      &lt;option value="2"&gt;What is your favorite color?&lt;/option&gt;
      &lt;option value="3"&gt;What is your pet's name?&lt;/option&gt;
      &lt;option value="4"&gt;How old are you?&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="select2" class="questions"&gt;
      &lt;option value="1"&gt;Please select an option...&lt;/option&gt;
      &lt;option value="2"&gt;What is your favorite color?&lt;/option&gt;
      &lt;option value="3"&gt;What is your pet's name?&lt;/option&gt;
      &lt;option value="4"&gt;How old are you?&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="select3" class="questions"&gt;
      &lt;option value="1"&gt;Please select an option...&lt;/option&gt;
      &lt;option value="2"&gt;What is your favorite color?&lt;/option&gt;
      &lt;option value="3"&gt;What is your pet's name?&lt;/option&gt;
      &lt;option value="4"&gt;How old are you?&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>