Select2 doesn't work on bootstrap popover form?

Question

I have a table one row contains around 30 td for each td I open a popover where I will be showing my form because I want to show for which td they enter the values so I have chosen to use bootstrap popover,

I use select2 for all the select field on popover form. Like this,

$(".select2").select2({
   width: '100%',
});

But this doesn't seems to be working. select2 gets applied but option is not opening at all.

I also reinitialised the select2 like this,

$('body').on('shown.bs.popover', function (e) {
    $(".select2").select2("destroy").select2();
});

but still the same issue.

FIDDLE

Thanks in advance.

Answer 1

I think select2 option did show, but it appeared behind popover container. Maybe you can try to change select2 z-index like below:

.select2-dropdown {
   z-index: 9001; //or try higher
}