title: Dynamic select option using select2 not working
body: <p>In my page, I have one select option using select2 and a button to dynamic add new select option to the page. But I have a problem with new control that is created dynamically by the button, I can't select it anymore like the original control. I'm still trying to solve it but it could be great if you give me a hand, thank in advance!</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-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;&lt;/title&gt;
   &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
   &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   jQuery( function( $ )
   {
    var $body = $( 'body' );
  
    $( '.sl-select' ).select2();
  
    $body.on( 'click', '.add-report', function()
    {
     var $this = $( this ),
      $clone = $this.siblings( '.report:last' ).clone();
  
     $clone.insertBefore( $this );
    } );
   } );
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="report"&gt;
    &lt;select class="sl-select"&gt;
     &lt;option value="1"&gt;option 1&lt;/option&gt;
     &lt;option value="2"&gt;option 2&lt;/option&gt;
     &lt;option value="3"&gt;option 3&lt;/option&gt;
    &lt;/select&gt;
   &lt;/div&gt;
   &lt;button class="add-report"&gt;Add Report&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is <a href="https://jsfiddle.net/dh256tem/" rel="nofollow">my fiddle</a></p>