title: JQuery clone HTML Selects and insert to a new line inside Row and Col div
body: <p>I have several HTML Select that I want to clone and insert into a new line inside a new Bootstrap <strong>row</strong> and <strong>col</strong> divs. The snippet is as under:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $("#subBtn").click(function(){
     var ifType = $("#pcker").clone();
      var ifType2 = $("#pcker2").clone();
     $("#scontainer").append("&lt;div class='row'&gt;&lt;div class='col'&gt;");
      $("#scontainer").append(ifType);
      $("#scontainer").append("&lt;/div&gt;");
      $("#scontainer").append("&lt;div class='col'&gt;");
      $("#scontainer").append(ifType2);
      $("#scontainer").append("&lt;/div&gt;&lt;/div&gt;");
  
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="row"&gt;
   &lt;div class="row"&gt;
    &lt;div class="col"&gt;
        &lt;select class="selectpicker" data-live-search="true" id="pcker"&gt;
          &lt;option value='gag'&gt;raps&lt;/option&gt;
          &lt;option value='gag'&gt;Experiments&lt;/option&gt;
          &lt;option value='gag'&gt;value&lt;/option&gt;
          &lt;option value='gag'&gt;select&lt;/option&gt;
          &lt;option value='gag'&gt;bootstrap&lt;/option&gt;      
        &lt;/select&gt;
  
      &lt;select class="selectpicker" data-live-search="true" id="pcker2"&gt;
        &lt;option value='gag2'&gt;raps&lt;/option&gt;
        &lt;option value='gag2'&gt;Experiments&lt;/option&gt;
        &lt;option value='gag2'&gt;value&lt;/option&gt;
        &lt;option value='gag2'&gt;select&lt;/option&gt;
        &lt;option value='gag2'&gt;bootstrap&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;button class="btn" type="button" id="subBtn" value="test"&gt;Add Button&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;div class="row" id="scontainer"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that instead of getting the new Selects inside the row and col divs, they are rendered outside the divs.</p>
  
  <p><a href="https://i.stack.imgur.com/tnxdK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tnxdK.png" alt="enter image description here"></a></p>
  
  <p>How do I insert the new Selects so that the HTML looks like</p>
  
  <pre><code>&lt;div class="row"&gt;&lt;div&gt; class="col"&gt;&lt;select&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;div class="col"&gt;&lt;select&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>