Retain select2 multiple selected dropdown values after form is submitted in the select field

Question

I am using Select2 and populating dropdown options for 3 form fields from my database. As part of my form submission process, I've broken it down into two steps:

1. User inputs 3 select2 multiselect dropdown fields and then clicks the submit button.
2. When the page is reloaded after submission, the original 3 fields get disabled and populated with the previous selections.

However, what I am unable to do is the last part of populating the existing 3 fields which get disabled with the values the user selected before.

This is my code of the 3 select2 input fields:

<script>
    $(document).ready(function() {
        const api_url = "<?php echo $base_api_url; ?>";
        var selected_banks = [];
        $("#multi_select_search").select2({
            placeholder: 'Choose banks...',
            ajax: {
                url: api_url + "/banks_list?query_type=bank_name",
                data: function (params) {
                    var query = {
                        query: params.term,
                    }
                    return query;
                    },
                    contentType: 'application/json',
                    dataType: 'json',
                    type: "GET"
                },
        });
        $("#bank_account_search").select2({
            placeholder: 'Choose bank accounts...',
            ajax: {
                url: api_url + "/banks_list?query_type=bank_account&selected_banks=",
                data: function (params) {
                    var query = {
                        query: params.term,
                    }
                    return query;
                    },
                    contentType: 'application/json',
                    dataType: 'json',
                    type: "GET"
                },
        });
        $('#multi_select_search').on('change', function() {
            selected_banks = $("#multi_select_search").val();
            $("#bank_account_search").select2({
            placeholder: 'Choose bank accounts...',
            ajax: {
                url: api_url + "/banks_list?query_type=bank_account&selected_banks=" + selected_banks,
                data: function (params) {
                    var query = {
                        query: params.term,
                    }
                    return query;
                    },
                    contentType: 'application/json',
                    dataType: 'json',
                    type: "GET"
                },
            });
        });
        $("#credit_card_search").select2({
            placeholder: 'Choose credit cards...',
            ajax: {
                url: api_url + "/banks_list?query_type=credit_card",
                data: function (params) {
                    var query = {
                        query: params.term,
                    }
                    return query;
                    },
                    contentType: 'application/json',
                    dataType: 'json',
                    type: "GET"
                },
        });
    });
    </script>

What I have tried:

$(".compare_button").click(function() {
  .each($("#credit_card_search"), function(){
       $(this).select2('val', [1,2,3]);
  });
});

I tried adding the above piece of code before the end of my code above to try populating one of these fields (as a test for whether it works) -> my plan was to replace "[1,2,3]" with the submitted $_GET array from the form submission above. But it does not work.

What I was expecting:

I was expecting that my "credit_card_search" multi-select dropdown will get populated with options "1", "2" and "3" when my submit button "compare_button" is clicked.