Select2 same class in bootstrap tabs in modal

#1

I use select2 in bootstrap tabs on Bootstrap Modal. It works fine if it’s a field in one tab. But when I create another tab and add field in a tab, field doesn’t work.

    $('.document_relations').select2({
            dropdownParent: $('#ConnectModal'),
        },);

<div class="modal fade" id="ConnectModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-body">
                <ul class="nav nav-tabs border-0" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active border-0" id="tab-0" data-bs-toggle="tab"
                           href="#tobi"
                           role="tab"
                           aria-controls="tabpanel-0"
                           aria-selected="true">
                            <i class="bi bi-file-earmark-text-fill"></i>
                            Tobi
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link border-0" id="tab-1"
                           data-bs-toggle="tab"
                           href="#return">
                            <i class="bi bi-file-earmark-x-fill"></i>
                            Return
                        </a>
                    </li>
                </ul>
                <div class="tab-content p-2 pt-3 bg-white" id="tab-content">
                    <div class="tab-pane active" id="tobi" role="tabpanel" aria-labelledby="tab-0">
                        <label for="document_connect" class="form-label">Connected To</label>
                        <select class="form-select document_connect" id="document_connect" name="document_connect[]"
                                multiple="multiple"></select>
                    </div>

                    <div class="tab-pane" id="return" role="tabpanel" aria-labelledby="tab-1">
                        <label for="document_connect" class="form-label">Connected To</label>
                        <select class="form-select document_connect" id="document_connect" name="document_connect[]"
                                multiple="multiple"></select>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>