Add custom ID to select2 container

Question

I got the following code for my select2 dropdown menu. Is it possible to give a custom ID to the select2 select2-container? I need a custom a ID so i can add a certain class to it.

<th id="filter_16" class="cell ">
        <select id="input_16" class="select-filter select2-hidden-accessible" name="filter[aa_location_type_code]" data-select2-id="select2-data-input_16" tabindex="-1" aria-hidden="true"></select>
        <span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="select2-data-11-gj73" style="width: 60px;"></span>
        <script>
            $(document).ready(function () {
                $("#input_16").select2();
                });
        </script>
</th>

Answer 1

If you need to add a certain class to the select2-container, you could use select2 containerCssClass

$select.select2({
  containerCssClass: 'myContainerCssClass'
});

Answer 2

 $(document).ready(function () { let element = document.querySelector(".select2-container"); element.id='newIdAddedHere' console.log(element) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Check console log for new id</p> <th id="filter_16" class="cell "> <select id="input_16" class="select-filter select2-hidden-accessible" name="filter[aa_location_type_code]" data-select2-id="select2-data-input_16" tabindex="-1" aria-hidden="true"></select> <span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="select2-data-11-gj73" style="width: 60px;"></span> </th>