Chosen jquery script is not working
<p>I'm using jQuery chosen in select element to make it more user friendly, but it's not working when i'm doing copy chosen div to another div using jquery </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>$(document).ready(function() {
  $(".chosen").chosen({});

  $("#movechosen").click(function() {
    var chosenHtml = $(".mycontainer").html();
    $(".movecontainer").append(chosenHtml);
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div class="mycontainer" style="background:#ddd"&gt;
     Container 1: &lt;select class="chosen" multiple&gt;
       &lt;option&gt;Select option&lt;/option&gt;
       &lt;option&gt;USA&lt;/option&gt;
       &lt;option&gt;Germany&lt;/option&gt;
       &lt;option&gt;India&lt;/option&gt;
       &lt;option&gt;China&lt;/option&gt;
       &lt;option&gt;Canada&lt;/option&gt;
       &lt;option&gt;Australia&lt;/option&gt;
     &lt;/select&gt;
   &lt;/div&gt;
  &lt;div class="movecontainer" style="background:#e1e1e1"&gt;
     Container 2 : 
  &lt;/div&gt;
&lt;input type="button" value="copy to container 2" id="movechosen" /&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css" /&gt;</code></pre>
</div>
</div>
</p>

<p>It's getting copy to another container but when you focus on chosen it will not load elements available in it.</p>