laravel - How to use select2 in Jquery Dynamic Input Field?

Question

I am using dynamic input field using this plugin https://www.jqueryscript.net/table/duplicate-resort-rows-dynamic.html and for Contact Address i am using select2.Everything is working fine expect When i try to add more input field.Everything is coming empty expect contact address select2 box.and i cannot select either

This is when i try to add more input field in edit form.All Contact Name and Contact phone and email are coming empty except contact_address field and i cannot select address to .

This is my html look like

   @foreach($contacts as $key => $contact)
              
            <tr>
                <td>
                  <input type="text" name="contact_name[]" value="{{ $contact->contact_name ?? null}}"
                       class="form-control" placeholder="{{ __('Contact Name') }}">
               </td>
               <td>
                <input type="text" name="contact_phone[]"  value="{{ $contact->contact_phone ?? null }}"
                           class="form-control" placeholder="{{ __('Contact Phone') }}">
                
                </td>
                <td>
                 <input type="text" name="contact_email[]"  value="{{ $contact->contact_email ?? null  }}"class="form-control" placeholder="{{ __('Contact Email') }}">
                </td>
                <td>
               
                    <select name="contact_address[]" data-selected="{{ old('contact_address',  $contact->contact_address ?? null) }}"
                            class="contact_address form-control" >
                     @foreach($addresses as $address)
                        <option value="{{$address->id}}" @if($address->id==$contact->contact_address) selected @endif>{{$address->name}},{{$address->district}}</option>
                        @endforeach
                    </select>
                
            </td>
                <td>
                <button class="btn btn-danger btn-sm" data-remove >
                    <i class="ni ni-fat-delete"></i>
                </button>
                <button class="btn btn-primary btn-sm"  data-add>
                    <i class="ni ni-fat-add"></i>
                </button>

            </td>
            </tr>
            @endforeach

My Script file look like this

$(document).ready(function() {
    $("tr select[name='contact_address[]']").select2({

        theme: "classic",
        allowClear: true,
        cache: true,
    });


});

Answer 1

<script>
    $('document').ready(function(){
    $(".select2").select2();

    $('.select_all').on("select2:select", function (e) { 
        var data = e.params.data.text;
        if(data=='All'){
        $(".select_all > option").prop("selected","selected");
        $(".select_all").trigger("change");
        }
    });
});
</script>