Problem with $.colorbox.remove() and an automatically opened colorbox

[mh-nichts]

Here is my reduced test case (tested on Windows 10, Firefox 50, Chrome 54, Edge and IE11): http://codepen.io/mh-nichts/pen/MbGPOy

What I'm trying to do : Each time the screen size is changing, I want to first remove all occurrences of colorbox ($.colorbox.remove), and then automatically open one colorbox ($.colorbox(...)).

What it's actually doing : On document ready, everything is fine, the automatic colorbox is opening. However, when the screen size changes, it seems the action of removing colorbox is happening "while" the automatic colorbox is opening, and results in only the overlay being visible : the colorbox itself has "display:none". I guess it's working fine on document ready only because there is no colorbox yet when $.colorbox.remove() is called, so there is no action launched before the automatic opening happens. It seems the action of removing all occurences of colorbox is happening asynchronously so it interferes with the automatic opening.

Am I guessing right, or do you have any idea why this is happening and how I could overcome this situation?