select2 doesn't work when add from dynamically with jquery

Question

i have a form that the elements is dynamic. we can add a row according to the needs. Here is a image link dynamic form

as we can see, we can add a row just press "tambah kolom" button and then the row will be attached to the form. i use jquery to adding dynamic. here is my forms code

HTML

<tr>
        <td>
            <input type="number" class="form-control" value="{{ old('itemujiriksa[0][jumlah_barang]') }}" name="itemujiriksa[0][jumlah_barang]">
        </td>                
        <td>
            <input type="text" class="form-control" value="{{ old('itemujiriksa[0][nama_barang]') }}" name="itemujiriksa[0][nama_barang]">
        </td>
        <td class="form_tabung">
            <select name="itemujiriksa[0][tube_id]" class="form-control tube" style="width: 100%">
            </select>
        </td>
        <td class="form_alat" style="display:none">
            <select name="itemujiriksa[0][alat_id]" class="form-control alat" style="width: 100%">
            </select>
        </td>
        <td>
            <input type="text" class="form-control" value="{{ old('itemujiriksa[0][keluhan]') }}" name="itemujiriksa[0][keluhan]">
        </td>
        <td>
            <input type="file" class="form-control" value="{{ old('itemujiriksa[0][fototabung][]') }}" name="itemujiriksa[0][fototabung][]" multiple />
        </td>
    </tr>

and here is my jquery code

jquery

<script>
$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $("#input_fields_wrap"); //Fields wrapper
var add_button      = $("#add_field_button"); //Add button ID

var x = {{$a}}; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        $(wrapper).append('<tr>\
        <td>\
            <input type="number" class="form-control" value="{{ old('jumlah_barang[]') }}" name="itemujiriksa[' + x +'][jumlah_barang]">\
        </td>\
        <td>\
            <input type="text" class="form-control" value="{{ old('nama_barang[]') }}" name="itemujiriksa[' + x +'][nama_barang]">\
        </td>\
        <td class="form_tabung">\
            <select name="itemujiriksa[0][tube_id]" class="form-control tube" style="width: 100%">\
            </select>\
        </td>\
        <td class="form_alat" style="display:none">\
            <select name="itemujiriksa[0][alat_id]" class="js-selectize form-control" placeholder="Pilih No Alat">\
                <option disabled selected value></option>\
                @foreach($alats as $at)\
                    <option value="{{ $at->id }}">{{ $at->no_alat }}</option>\
                @endforeach\
            </select>\
        </td>\
        <td>\
            <input type="text" class="form-control" value="{{ old('keluhan[]') }}" name="itemujiriksa[' + x +'][keluhan]">\
        </td>\
        <td>\
            <input type="file" class="form-control" value="{{ old("itemujiriksa['+ x +'][fototabung][]") }}" name="itemujiriksa[' + x +'][fototabung][]" multiple>\
        </td>\
        <td><a class="btn btn-danger remove_field">Hapus Kolom</a></td>\
    </tr>'); //add input box
        x++; //text box increment
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parents("tr").remove(); x--;
}) });

and here's my select2 code

SELECT2

$(document).ready(function() { var $select2Elm = $('.alat');
$select2Elm.select2({
        width: 'resolve',
        placeholder: "Pilih No Alat",
        ajax: {
            url: function(){
                var value = $('#customer').val();
                var url = "/admin/getDataAlat/ujiriksa/"+value;
                console.log(url);
                return url;
            },
            dataType: 'json',
            type: "GET",
            delay: 250,
            data: function (params) {
              return {
                q: params.term, // search term
                page: params.page
              };
            },
            processResults: function (data, page) {
              // parse the results into the format expected by Select2.
              // since we are using custom formatting functions we do not need to
              // alter the remote JSON data
              return {
                results: $.map(data, function (item) {
                    return {
                        text: item.name,
                        id: item.id
                    }
                })
              };
            },
            cache: true
          },
}); });

my question is

i have defined class alat to initiate the no tabung select box for populate data from select2. but after adding a new row which is the class is same. the new select box doesnt populate data. what should i do master?

Answer 1

You can initialize after append your code.

You can see below example

$(document).on("click",".add-new-item",function(e){
var html = 'your html';
    $( '.element' ).append(html);
    initSelect2();});

function initSelect2() {
 $('.select2_single').select2();}

Answer 2

you'll need to initialize each new select element after you append the html.

$(add_button).click(function(e){

    //append new table rows here
    $(wrapper).append('...');

    //reinitialize the new select box
    $('.alat').select2({
     //configuration
    });

});