How to reset a custom plugin dialog in CKEditor 4 - drupal

Question

My problem is I have a plugin which works fine when there is only 1 CKEditor in the page. You can open and close the custom plugin dialog as many times as you want, and make all your changes.
However, as soon as you open the plugin on any of the other CKEditors on the page, the values from the previous CKEditor instance are still present, and a lot of quirks happen.
I tried using the dialog.destroy() function, which "fixes" the issue - meaning you can now use it fine on all the different CKEditor instances. But it breaks the current instance, meaning if you try to open any you already used again, it doesn't work (since the dialog has been destroyed). I tried using reset() and replace() to no avail.
Maybe it has something to do with the fields themselves... here is a sample from the dialogs/my_plugin.js file:
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'html',
id: 'icon_with_options',
html: '<div id="selected-icon"></div>',
},
{
type: 'html',
id: 'osu_icon_color',
html: '<div class="osu-colors"><label>Click on a color <input id="osu-icon-color" type="text" value="osu" readonly/></label>' +
'<p class="osu color-active"></p>' +
'<p class="sand"></p>' +
'<p class="stratosphere"></p>' +
'<p class="moondust"></p>' +
'<p class="dark"></p>' +
'<p class="pine-stand"></p>' +
'<p class="luminance"></p>' +
'<p class="reindeer-moss"></p>' +
'</div>',
onLoad: function () {
(function ($) {
var colors = $('.osu-colors p');
colors.click(function (e) {
colors.removeClass('color-active');
var className = e.currentTarget.className;
document.getElementById('osu-icon-color').value = className;
icon_preview();
$(this).addClass('color-active');
});
})(jQuery);
},
},
I wonder if the problem is that most HTML is decoration.
I did samples with the plugin using regular type:text and type:select and these worked fine. But somehow the type:'html' does not clear the same way and is causing issues. Unfortunately all examples online are of simple text elements or other prebuilt elements.
Any help is appreciated. This is a plugin inside a Drupal 7 module, but it should apply regardless.

Answer 1

I am sure there are better ways of doing this, but what I ended up doing was:
Since CKEditor gives unique names to every instance of the editor, I used: CKEDITOR.currentInstance.name as an ID that wraps around all the html in the plugin.
Modified my javascript to target everything based on the CKEDITOR.currentInstance.name and any particular ID or class I needed to make it happen.
Now since each instance is differentiated by that ID, all the CKEditor instances in a page work fine.