how to use select2 with dynamic form

I’m trying to add select2 for a dynamic form which is a modelformset_factory, but it doesnt work as i expect, it only works after the first add new row button! and after the third forms it create an extra drop down field!

here is what im tried

        const addNewRow = document.getElementById('add-more-invoice')    
        const totalNewForms = document.getElementById('id_imei-TOTAL_FORMS')
        addNewRow.addEventListener('click',add_new_row);
    
    
        function add_new_row(e){

            if(e){
                e.preventDefault();
                       
            }  
            const currentFormClass = document.getElementsByClassName('child_imeiforms_row')
    
            const countForms = currentFormClass.length        
    
            const formCopyTarget = document.getElementById('form-imeilists')
    
            const empty_form = document.getElementById('empty-imei-invoiceform').cloneNode(true);        
            empty_form.setAttribute('class','child_imeiforms_row')
            empty_form.setAttribute('id',`form-${countForms}`)
            const rgx = new RegExp('__prefix__','g')
            empty_form.innerHTML = empty_form.innerHTML.replace(rgx,countForms)
    
            totalNewForms.setAttribute('value',countForms + 1)
            formCopyTarget.append(empty_form)
            $('.choose').select2();
            
        }
        $('.choose').select2();
            <form action="" method="POST" id="create-permcustomer-invoice">{% csrf_token %}        
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                    <i class="fas fa-file-signature"></i>
                    <label>customer name</label>
                    {{ main_form.customer | add_class:'form-control' | append_attr:'onchange:currentBalance();' }}
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                    <i class="fas fa-box-usd"></i>                        
                    <label>balance</label>
                    <input type="number" disabled class="form-control" id="balance_cus">

                </div>
                    <!-- /.form-group -->
                </div>               
                <!-- /.col -->
                <div class="col-md-4 pull-right">
                    <div class="form-group">
                    <i class="far fa-clock"></i>
                    <label>date</label>
                    {{main_form.created | add_class:'form-control text-center'}}
                    </div>
                </div>                 
            </div>   
            {{imei_forms.management_form}}
            <div id="form-imeilists">
                {% for imei in imei_forms %}
                {{imei.id}}
                <div class="child_imeiforms_row">

                    <div class="row no-gutters table-bordered">
                        <div class="col-md-3">
                            <div class="form-group">
                                {{imei.item | add_class:'form-control choose' | append_attr:'onchange:imeiPlusInfo();'}}
                                <div class="text-danger text-center" hidden></div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                {{imei.price | add_class:'price'}}
                            </div>
                        </div>                                   
                    <div class="col-md-1">
                        <div class="form-group">
                            <input step="any" type="number" onkeyup="totalSum()" class="form-control loan" disabled placeholder="loan">
                        </div>
                    </div>                        
                        
                    </div>
                </div>
                {% endfor %}
            </div>
            <div id="empty-imei-invoiceform" class="hidden">
                <div class="row no-gutters table-bordered">
                    <div class="col-md-3">
                        <div class="form-group">
                            {{imei_forms.empty_form.item | add_class:'form-control choose' | append_attr:'onchange:imeiInfo();'}}
                            <div class="text-danger text-center" hidden></div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            {{imei_forms.empty_form.price | add_class:'price'}}
                            <div class="text-danger text-center" hidden></div>
                        </div>
                    </div>
       
                    <div class="col-md-1">
                        <div class="form-group">
                            <input step="any" type="number" onkeyup="totalSum()" class="form-control loan" disabled placeholder="loan">
                        </div>
                    </div>                        
                </div>

            </div>
            <button type="button" class="btn btn-lg btn-info" id="add-more-invoice">add new row</button>

            <div class="card-footer">
                <div class="row justify-content-center">
                    <button type="submit" class="btn btn-lg btn-success">save</button>
                </div>
            </div>
        </form>

but doesnt work as i expected ! is there any solution please ?thank you in advance ..