title: Select2 does not function properly when I use it inside a ajax Bootstrap modal
body: <p>im creating multiple dropdown select inside ajax bootstrap modal. my problem is, my multiple dropdown show up like this</p>
  <p><a href="https://i.stack.imgur.com/zv5fj.png" rel="nofollow noreferrer">like this</a></p>
  <p><a href="https://i.stack.imgur.com/8Agkk.png" rel="nofollow noreferrer">instead like this</a></p>
  <p>which means, my problem is , when i open up my modal, my multiple dropdown will also show instead of when i do outside of modal, the dropdown will appear when i click on the box.
  this will be issue when i selected  my multiple dropdown, i dont have any input to show it.</p>
  <p>i already read this <a href="https://select2.org/troubleshooting/common-problems" rel="nofollow noreferrer">https://select2.org/troubleshooting/common-problems</a> . but my modal is inside the ajax, i can't refer to the solution. please help me.</p>
  <p>this is my modal:</p>
  <pre><code>&lt;div id=&quot;myModal&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot; class=&quot;modal text-left&quot;&gt;
      &lt;div role=&quot;document&quot; class=&quot;modal-dialog&quot;&gt;
          &lt;div style=&quot;padding-bottom: 26px;&quot; class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header row d-flex justify-content-between mx-1 mx-sm-3 mb-0 pb-0 border-0&quot;&gt;                       
                    &lt;div class=&quot;tabs&quot; id=&quot;tab03&quot;&gt;
                     &lt;h6 class=&quot;text-muted&quot;&gt;Job Assign&lt;/h6&gt;
                  &lt;/div&gt;  
          
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;&lt;i class=&quot;fa fa-close&quot; style=&quot;font-size:20px;&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                  
                  &lt;div class=&quot;line&quot;&gt;&lt;/div&gt;
                      &lt;br&gt;
                  &lt;div class=&quot;modal-body p-0&quot;&gt;
      
  
                  &lt;fieldset id=&quot;tab031&quot;&gt;
                    
                          &lt;form action=&quot;jobassignnd.php&quot; method=&quot;post&quot;&gt;
                              &lt;div class=&quot;remark-details&quot;&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;     
                          
                      &lt;script type='text/javascript'&gt;
  
                      $(document).ready(function() {
                      $('.card').click(function() {
                      var jobregister_id = $(this).data('id');
  
  // AJAX request
  
                      $.ajax({
                      url: 'jobassignnd.php',
                      type: 'post',
                      data: {jobregister_id: jobregister_id},
                      success: function(response) {
          
   // Add response in Modal body
                      $('.remark-details').html(response);
   // Display Modal
                      $('#myModal').modal('show');
                      }
                  });
              });
          });
      &lt;/script&gt;
                      
                  &lt;/fieldset&gt;
  </code></pre>
  <p>and this is my jobassignnd.php , which is my ajax</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
  
      &lt;meta name=&quot;keywords&quot; content=&quot;&quot; /&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;link href=&quot;https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot; integrity=&quot;sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==&quot; crossorigin=&quot;anonymous&quot; referrerpolicy=&quot;no-referrer&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot; &gt;&lt;/script&gt;  
  &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  
  
  &lt;body&gt;
  
  
  
      &lt;div class=&quot;assistants&quot; style=&quot;padding-top: 25px;&quot; id=&quot;multipselect&quot;&gt;
         &lt;select style=&quot;width: 100%;&quot; name=&quot;Job_assistant[]&quot; class=&quot;form-control multiple-select&quot; multiple&gt;
          
      &lt;option value=&quot;&quot;&gt;--Select Assistant--&lt;/option&gt;
          &lt;?php
          $con = mysqli_connect(&quot;localhost&quot;,&quot;root&quot;,&quot;&quot;,&quot;&quot;);
          $query = &quot;SELECT staffregister_id, username, staff_position, tech_avai FROM staff_register WHERE staff_position = 'technician' OR staff_position = 'General Worker' ORDER BY staffregister_id ASC&quot;;
          $query_run = mysqli_query($con, $query);
          if(mysqli_num_rows($query_run) &gt; 0)
          {
              foreach ($query_run as $rowstaff)
              {
                
                  ?&gt;
                  &lt;option value=&quot;&lt;?php echo $rowstaff[&quot;username&quot;]; ?&gt;&quot;&gt;&lt;?php echo $rowstaff[&quot;username&quot;]; ?&gt;&lt;/option&gt;
                  &lt;?php
  
              }
          }
          else
          {
              echo &quot;No Record Found&quot;;
          }
          ?&gt;
  
  &lt;/select&gt;
  
      &lt;/div&gt;
  
  &lt;script&gt;
  
  $(&quot;#multipselect&quot;).on('change', function () {
      
  $(&quot;.multiple-select&quot;).select2({
  
  });
  
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>