HOW TO ADD SELECT2 AS A REPEATER FIELD

• Create html template.

<section id="carrier-repeater_wrapper">
        <section class="col-md-12 text-right mb-4">
            <input data-repeater-create type="button" class="btn btn-md btn-secondary" value="Add"/>
        </section>
        <section class="carrier-repeater_group" data-repeater-list="_truck_list">
            <div class="form-row carrier-repeater_item" data-repeater-item>
                <div class="col-md-12 truck-label_header mb-2 font-weight-bold h5">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Truck # <span class="truck-label_header_no">1</span> -</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control form-control carrier_ls_pro" name="carrier_ls_pro" placeholder="" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label" style = "font-size: 16px; font-family:'Arial'; font-weight:200 !important;">Carrier</label>
                        <div class="col-sm-4">
                        <select class="form-control required form-control-sm carrier-address-list" data-label="Carrier" name="carrier_name" data-type="carrier">
                            <option value=""><?php _e('--Select Carrier--', 'wpccustom'); ?></option>
                        </select>
                        </div>
                    </div>
                </div>
                <div class="form-group col-md-6">
                    <label >Name<span class="asterisk required">*</span></label>
                    <input type="text" class="form-control required form-control-sm" data-label="Name" name="carrier_name" placeholder="">
                </div>
            </div> 
        </section>
    </section>

Add script to the repeater

jQuery(document).ready(function($){
    //set constant function for slect2 carrier address
    const search_carrier_address = () =>{
        $('.carrier-address-list').select2({
            // tags: true,
            //Note: you can also use AJAX here..
            width: '360',
            minimumInputLength: 3,
            placeholder: 'Search Text Here',
            allowClear: true,
        });
    }

    $('#carrier-repeater_wrapper').repeater({

        //this is to add select2 when repeater is ready (first item)
        ready: function (setIndexes) {
            search_carrier_address();
        },
        show: function () {
            $(this).slideDown();
            search_carrier_address();
        },
        hide: function (deleteElement) {
            if(confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
                setTimeout( function(){
                }, 1000 );
            }
        },
        
    });
});