Select2 problem in Bootstrap Modal

Its a common problem implementing select2 in Bootstrap Modal. Mostly you will face problem that either the dropdown menu shown behind the modal or the livesearch doesn't work.

I found the solution after I browsed around, unfortunately I forgot the source where I found this solution. What I remembered, blurly, I found it in Github.

So, if my HTML Bootstrap Modal looks like this:

 
<div class="modal fade" id="myModal"  role="dialog" aria-hidden="true">
    <div class="modal-xl modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body" >
                <div class="form-group">
                    <label for="idMySelect">SELECT</label>
                    <select id="idMySelect" class="form-control basic">
                        <option value="one">option one</option>
                        <option value="two">option two</option>
                        <option value="three">option three</option>
                        ...
                    </select>
                </div> 
            </div>

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

the JS for select2 in that modal would be:

 
$("#idMySelect").select2({
     tags: true,
     dropdownParent: $('#myModal')
});

We should set each select2 separately, if we have more than one select2 and especially if those select2 are in different modal (if we use more modals in one page) or some are on the parent page.