title: How to set cloning on select?
body: <p>I have a question about <code>&lt;select&gt;</code>
  This my code</p>
  
  <pre><code>&lt;div class="AllSize SizeSML hidden2"&gt;
      &lt;div class="row-fluid appendSMLModel"&gt;
          &lt;div class="row-fluid span16 appendSML" for="0"&gt;
              &lt;div class="span3 mobileFullPhone2"&gt;
                  &lt;label&gt;Size&lt;/label&gt;
                  &lt;div class="select-container"&gt;
                      &lt;select name="size_SML_select" id="SizeUniSML" validate="" required=""&gt;
                          &lt;option value="" selected="" disabled=""&gt;Select&lt;/option&gt;
                          &lt;option value="small"&gt;Small&lt;/option&gt;
                          &lt;option value="medium"&gt;Medium&lt;/option&gt;
                          &lt;option value="large"&gt;Large&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="span5 mobileFullPhone2"&gt;
                  &lt;label&gt;Stock&lt;/label&gt;
                  &lt;input type="text" autocomplete="off" name="size_SML_input" value="" validate="" required=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  $(document).on('change', '#SizeUniSML', function(e) {
      var selectval = $(this).find(":selected").val();
      if (selectval == "delete") {
          $(this).parents(".appendSML").remove();
      } else if (selectval !== "") {
          var count = $('.appendSML').length;
          var clone = $('.appendSML:first').clone();
          $('.appendSMLModel').append(clone);
      }
  });
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/Lwgj8647/" rel="nofollow noreferrer">This jsfiddle</a></strong></p>
  
  <p>Ok, this my question</p>
  
  <p><strong>Question 1</strong></p>
  
  <p>How do I add the  code if I use <code>clone()</code>? If you see the code above, the first option is only filled by <em>small medium</em> and <em>large</em>, but <strong>I want to add the code after the clone</strong> <code>&lt;option value="delete"&gt;Delete&lt;/option&gt;</code> to delete. To be like this </p>
  
  <pre><code>---------------------- This NOT CLONE ----------------------
  &lt;select name="size_SML_select" id="SizeUniSML" validate="" required=""&gt;
      &lt;option value="" selected="" disabled=""&gt;Select&lt;/option&gt;
      &lt;option value="small"&gt;Small&lt;/option&gt;
      &lt;option value="medium"&gt;Medium&lt;/option&gt;
      &lt;option value="large"&gt;Large&lt;/option&gt;
  &lt;/select&gt;
  ---------------------- This SELECT CLONE ----------------------
  &lt;select name="size_SML_select" id="SizeUniSML" validate="" required=""&gt;
      &lt;option value="" selected="" disabled=""&gt;Select&lt;/option&gt;
      &lt;option value="small"&gt;Small&lt;/option&gt;
      &lt;option value="medium"&gt;Medium&lt;/option&gt;
      &lt;option value="large"&gt;Large&lt;/option&gt;
      &lt;option value="delete"&gt;Delete&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>Question 2</strong></p>
  
  <p>If I choose a <strong>medium</strong>, then <strong>medium</strong> option on the clone will be <strong>disabled</strong></p>
  
  <pre><code>---------------------- This NOT CLONE ----------------------
  &lt;select name="size_SML_select" id="SizeUniSML" validate="" required=""&gt;
      &lt;option value="" disabled=""&gt;Select&lt;/option&gt;
      &lt;option value="small"&gt;Small&lt;/option&gt;
      &lt;option value="medium" selected="" &gt;Medium&lt;/option&gt;
      &lt;option value="large"&gt;Large&lt;/option&gt;
  &lt;/select&gt;
  ---------------------- This SELECT CLONE:FIRST ----------------------
  &lt;select name="size_SML_select" id="SizeUniSML" validate="" required=""&gt;
      &lt;option value="" selected="" disabled=""&gt;Select&lt;/option&gt;
      &lt;option value="small"&gt;Small&lt;/option&gt;
      &lt;option value="medium"  disabled=""&gt;Medium&lt;/option&gt;
      &lt;option value="large"&gt;Large&lt;/option&gt;
      &lt;option value="delete"&gt;Delete&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>But if I remove the select, then the <strong>disabled option</strong> will reappear</p>
  
  <p><strong>Question 3</strong></p>
  
  <p>How to turn off the jquery function if I have selected the option?
  For example in the first select, I select <em>medium</em>, and then the <code>second clone</code> will appear. But if I modify the first select to be <em>large</em>, why third clone select will appear? I want when I have selected select, then do not add clones again</p>