jQuery Selector Issues with Bracket / array

Question

I have dynamically created inputs/selects and these form fields contain brackets in their names as they are arrays. I want to refer to these selects so that I can initiate them as select2 objects but cant even get the selector right. As you can see I need the selector to be dynamic to include the initial array element "[0]", "[1]", etc. but to include the [course] end so I can specify the code for all the course select2 elements (will do the same for the [module] select2 elements, but that code will be different - so its not as simple as apply the same select2 code for all selects).

Hence my attempt to use a selector of "all select elements within the #modal-course-grades-list-body that begin with 'new_grades' and ends in '[course]' - but the square brackets is causing issues:

$("#modal-course-grades-list-body select[id^=new_grades][id$=[course]]").select2()

Error: Uncaught Error: Syntax error, unrecognized expression: #modal-course-grades-list-body select[id^=new_grades][id$=[course]]

(Dynamically Created) HTML:

<tbody id="modal-course-grades-list-body">
<tr>
    <td>Bachelor of Commerce</td>
    <td>Accounting 1A</td>
    <td>2019</td>
    <td id="course-row-1"><input class="form-control kt-inputmask decimal" id="module_grades[3663]" name="module_grades[3663]"></td>
</tr>
<tr>
    <td>Bachelor of Commerce</td>
    <td>Accounting 1B</td>
    <td>2019</td>
    <td id="course-row-2"><input class="form-control kt-inputmask decimal" id="module_grades[3664]" name="module_grades[3664]"></td>
</tr>
<tr>
    <td><select class="form-control" id="new_grades[0][course]" name="new_grades[0][course]" placeholder="Course"></select></td>
    <td><select class="form-control" id="new_grades[0][module]" name="new_grades[0][module]" placeholder="Module"></select></td>
    <td><input class="form-control" id="new_grades[0][year]" name="new_grades[0][year]" placeholder="Year"></td>
    <td><input class="form-control kt-inputmask decimal" id="new_grades[0][grade]" name="new_grades[0][grade]"></td>
</tr>
<tr>
    <td><select class="form-control" id="new_grades[1][course]" name="new_grades[1][course]" placeholder="Course"></select></td>
    <td><select class="form-control" id="new_grades[1][module]" name="new_grades[1][module]" placeholder="Module"></select></td>
    <td><input class="form-control" id="new_grades[1][year]" name="new_grades[1][year]" placeholder="Year"></td>
    <td><input class="form-control kt-inputmask decimal" id="new_grades[1][grade]" name="new_grades[1][grade]"></td>
</tr>
</tbody>        

jQuery:

    $("#modal-course-grades-list-body select[id^=new_grades][id$=[course]]").select2({
        placeholder: "Select A Course",
        ajax: {
            url: "{{route('baadmin.students.get_student_bursary_enrolment_courses')}}",
            type: "post",
            dataType: 'json',
            delay: 250,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: function (params) {
                return {
                    parent_id: $("#student_bursary_enrolment_id").val(),
                    search: params.term // search term
                };
            },
            processResults: function (response) {
                return {
                    results: response
                };
            },
            cache: true,
            tags: true,
            createTag: function (params) {
                return {
                    id: params.term,
                    text: params.term,
                    newOption: true
                }
            },
            templateResult: function (data) {
                var $result = $("<span></span>");

                $result.text(data.text);

                if (data.newOption) {
                    $result.append(" <em>(new)</em>");
                }

                return $result;
            }
        }
    });