Javascript added multiple Bootstrap Select div not working

Question

I am using Bootstrap to design my pages. I am following this page http://skote-light.node.themesbrand.com/form-advanced to create a Multiple Select.

<script src="~/assets/js/pages/form-advanced.init.js"></script>

<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>

<div id="add-more">Add More<div>

the output to this is

The requirement is i need to have an add more button, to add more multiple select. So what I did is

$("#add-more").click(function () {
    $("#add-more").before(
`
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>
`

The problem is that when I am trying to append using JavaScript the multiple select behaves this way i.e. the bootstrap properties is not applied to it.

Most probably while appending using JavaScript, it is not able to use the JavaScript script.

Please help me to fix this issue. Thanks.

Answer 1

You need to initialize select2 which is added dynamically for that you can simply use $('.select2-multiple:last').select2() this will search for select-box that is last and initialize it .

Demo Code :

$(".select2-multiple").select2();
$("#add-more").click(function() {
  $("#add-more").before(
    `
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>
`)
  //initialize selct2 which is added last
  $('.select2-multiple:last').select2();
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<div class="row mt-3">
  <div class="col-lg-12">
    <div class="form-group">
      <label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
      <select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
        <option value="SG">Singapore</option>
        <option value="CH">China</option>
        <option value="CA">California</option>
      </select>
    </div>
  </div>

  <div id="add-more">Add More
    <div>