title: Jquery dynamic options remove/add in select forms
body: <p>I have following simple Html code with 2 SELECT forms with identical options values:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select id="first"&gt;
      &lt;option value="none"&gt;None&lt;/option&gt;
      &lt;option value="one"&gt;Toyota&lt;/option&gt;
      &lt;option value="two"&gt;Nissan&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="second"&gt;
      &lt;option value="none"&gt;None&lt;/option&gt;
      &lt;option value="one"&gt;Toyota&lt;/option&gt;
      &lt;option value="two"&gt;Nissan&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I am writing a jquery script that should do following:
  if in the #first select I choose any value except "none", f.e. Toyota, it will automatically disappear from the #second select:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select id="second"&gt;
      &lt;option value="none"&gt;None&lt;/option&gt;
      &lt;option value="two"&gt;Nissan&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>further, if I choose Nissan in the #second select(assuming #first still have Toyota selected), it should automatically disappear from the #first select:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select id="first"&gt;
      &lt;option selected="selected" value="one"&gt;Toyota&lt;/option&gt;
      &lt;option value="none"&gt;None&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>At the end, when I reset selector to "None" in any select form, it should recreate that option in another select on the same position.</p>
  
  <p>How is that better to achieve? is it better to use .remove()/.append() actions or .hide()/.unhide()? So far I create following snippet:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).on('change','select', function() {
     var sel = $(this).attr('id');
     var val = $(this).val();
  
  if ( sel === "first" &amp;&amp; val != "none") {
      $("#second option[value="+val+"]").remove();
  } else if ( sel === "second" &amp;&amp; val != "none") {
      $("#first option[value="+val+"]").remove();
  }
  </code></pre>
  
  <p>this just removes selected option from another select, but how to correctly re-create option on the same position after changing select to "None"?</p>
  
  <p><strong>UPDATE</strong>:  .hide() function doesn't work in some browsers, I need to use .remove()/.append(), but the problem is that how to append to the position that it was before?</p>