ckeditor dialog and widget not working properly - ckeditor

Question

In the ckeditor (plugin.js) I have this code below.
CKEDITOR.plugins.add( 'beforeafter', {
requires: 'widget',
icons: 'beforeafter',
init: function( editor ) {
editor.widgets.add( 'beforeafter', {
button: 'beforeafter',
template:
'<div class="ba-slider-element">' +
'<div class="ba-slider">' +
'<div class="resize">' +
'<div class="handle">' +
'</div>',
dialog: 'beforeafterDialog',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'ba-slider' );
}
} );
// Define an editor command that opens our dialog window.
editor.addCommand( 'beforeafter', new CKEDITOR.dialogCommand( 'beforeafterDialog' ) );
// Create a toolbar button that executes the above command.
editor.ui.addButton( 'beforeafter', {
// The text part of the button (if available) and the tooltip.
label: 'Insert A Before And After Image',
// The command to execute on click.
command: 'beforeafter',
// The button placement in the toolbar (toolbar group name).
toolbar: 'insert'
});
// Register our dialog file -- this.path is the plugin folder path.
CKEDITOR.dialog.add( 'beforeafterDialog', this.path + 'dialogs/beforeafter.js' );
}
});
In the dialog file (beforeafter.js) I have this code below.
CKEDITOR.dialog.add( 'beforeafterDialog', function( editor ) {
return {
title: 'Before and After Image Tool',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
// The tab content.
elements: [
{
type: 'text',
id: 'beforeimage',
label: 'paste your BEFORE image URL below',
validate: CKEDITOR.dialog.validate.notEmpty( "Please add a URL in the Before image field." )
},
{
type: 'text',
id: 'afterimage',
label: 'paste your AFTER image URL below',
validate: CKEDITOR.dialog.validate.notEmpty( "Please add a URL in the After image field." )
}
]
},
],
onOk: function() {
var dialog = this;
var result = editor.document.createElement('div');
result.setHtml("<div class=\"ba-slider-element\">\n" +
"<div class=\"ba-slider\">\n" +
"<img src=\"" + dialog.getValueOf( 'tab-basic', 'beforeimage' ) + "\" alt=\"\">\n" +
"<div overlay-lable=\"Before\" class=\"before-lable-1\">\n" +
"<div overlay-lable=\"Before\" class=\"before-lable-2\">\n" +
"<div class=\"resize\">\n" +
"<img src=\"" + dialog.getValueOf( 'tab-basic', 'afterimage' ) + "\" alt=\"\">\n" +
"<div overlay-lable=\"After\" class=\"after-lable-1\">\n" +
"</div>\n" +
"<div overlay-lable=\"After\" class=\"after-lable-2\"></div></div>\n" +
"<div class=\"handle\">\n" +
"</div>");
editor.insertElement( result );
}
};
});
In the ckeditor posting edit window, when I click the source button to view the source, this is the code that is generated below.
<div>
<div class="ba-slider-element">
<div class="ba-slider">
<img alt="" src="https://pepsized.com/wp-content/uploads/2018/09/beerslider/demo-assets/images/man-hold-beer.jpg">
<div overlay-lable="Before" class="before-lable-1">
<div overlay-lable="Before" class="before-lable-2">
<div class="resize">
<img alt="" src="https://pepsized.com/wp-content/uploads/2018/09/beerslider/demo-assets/images/man-hold-beer-after1logo.jpg">
<div overlay-lable="After" class="after-lable-1">
</div>
<div overlay-lable="After" class="after-lable-2">
</div>
</div>
<div class="handle">
</div>
</div>
</div>
</div>
</div>
The slider works fine but I am not able to edit the URL fields.
When I double click the slider to edit it the dialog window will pop up with an empty URL fields.
ckeditor diolog
What I need help with is.
1. I need the element to highlight in yellow and blue when I hover over the area
2. When I double click to edit, the dialog fields should show the previous inputted URL.
3. How would be able to preview the slider wile in edit mode. the slider use jquery script.
Your help will be truly appreciated.