Using JQuery to handle Add, Add All, Remove, Remove All, Up, Down process for two Select Box into Editor Part of custom Web Part

There was a requirement to develop a UI for Editor Part of my custom Web Part to add 2 select box and adding Add, Add All, Remove, Remove All functionality. Also i had to save selected images as webpart property and display into webpart on apply. UI is something like given image.

I added all UI from editor part class but for movements i used JQuery but when i try to save the data on Apply event i got an error:
Invalid postback or callback argument. Event validation is enabled using

After so much of googling and trying mutiple solutions i got in blogs finally i gone through this error by putting hidden text box and putting all selected image ids into it.

Here is code

As we had to create all controls at runtime into Editor Part Code also we had to send the ClientID for the controls which will be used by JQuery code added into js file so i added small script block to send ids to JQuery

Into CreateChildControls() of Editor Part

this.txtHiddenIDs = new TextBox();
this.txtHiddenIDs.ID = "hdnIDs";
this.txtHiddenIDs.Style.Add(HtmlTextWriterStyle.Visibility, "hidden");
this.txtHiddenIDs.Style.Add(HtmlTextWriterStyle.Position, "absolute");
this.Controls.Add(txtHiddenIDs);

if (!Page.ClientScript.IsClientScriptBlockRegistered("jscript"))
{
string jscript = "<script type="text/javascript"><span style="font-size:85%;"> var $lstBoxAllItems = $('#" + lstBoxAllItems.ClientID + "'); var $lstBoxSelectedItems = $('#" + lstBoxSelectedItems.ClientID + "'); var $txtHiddenIDs = $('#" + txtHiddenIDs.ClientID + "'); ";
jscript += "<script type="text/javascript" src="/_layouts/1033/EgSpi/Default/BannerEditorPart.js"></script>";
Page.ClientScript.RegisterStartupScript(typeof(string), "jscript", jscript, false);
}

Here is JQuery which do all Add/Add All/Remove/Remove All/Up/Down
$(document).ready(function () {
$lstBoxAllItems.val($('#' + $lstBoxAllItems.attr('id') + ' option:first').val())
});

$('#btnAdd').click(function () {
var options = $("#" + $lstBoxAllItems.attr('id') + ' option:selected');
options.each(function () {
$("#" + $txtHiddenIDs.attr('id') + '').val($("#" + $txtHiddenIDs.attr('id') + '').val() + ',' + $(this).val());
})

$('#' + $lstBoxAllItems.attr('id') + ' option:selected').appendTo($lstBoxSelectedItems);
$lstBoxAllItems.val($('#' + $lstBoxAllItems.attr('id') + ' option:first').val())
});

$('#btnRemove').click(function () {

var options = $("#" + $lstBoxSelectedItems.attr('id') + ' option:selected');
options.each(function () {
var idx = $("#" + $txtHiddenIDs.attr('id') + '').val().indexOf(',' + $(this).val())
$("#" + $txtHiddenIDs.attr('id') + '').val($("#" + $txtHiddenIDs.attr('id') + '').val().replace(',' + $(this).val(), ''));
})
$('#' + $lstBoxSelectedItems.attr('id') + ' option:selected').appendTo($lstBoxAllItems);
$lstBoxSelectedItems.val($('#' + $lstBoxSelectedItems.attr('id') + ' option:first').val());
});

$('#btnAddAll').click(function () {
var options = $("#" + $lstBoxAllItems.attr('id') + ' option');
options.each(function () {
$("#" + $txtHiddenIDs.attr('id') + '').val($("#" + $txtHiddenIDs.attr('id') + '').val() + ',' + $(this).val());
})

$('#' + $lstBoxAllItems.attr('id') + ' option').appendTo('#' + $lstBoxSelectedItems.attr('id') + '');
$lstBoxSelectedItems.val($('#' + $lstBoxSelectedItems.attr('id') + ' option:first').val());
});

$('#btnRemoveAll').click(function () {
$('#' + $lstBoxSelectedItems.attr('id') + ' option').appendTo('#' + $lstBoxAllItems.attr('id') + '');
$("#" + $txtHiddenIDs.attr('id') + '').val('');
$lstBoxAllItems.sort_select_box();
$lstBoxAllItems.sort_select_box();
$lstBoxAllItems.val($('#' + $lstBoxAllItems.attr('id') + ' option:first').val());
});

$('#btnMoveUp').click(function () {
$('#' + $lstBoxSelectedItems.attr('id') + ' option:selected').each(function () { $(this).insertBefore($(this).prev()) });

var options = $("#" + $lstBoxSelectedItems.attr('id') + ' option');
$("#" + $txtHiddenIDs.attr('id') + '').val('');
options.each(function () {
$("#" + $txtHiddenIDs.attr('id') + '').val($("#" + $txtHiddenIDs.attr('id') + '').val() + ',' + $(this).val());
})
});

$('#btnMoveDown').click(function () {
$('#' + $lstBoxSelectedItems.attr('id') + ' option:selected').each(function () { $(this).insertAfter($(this).next()) });

var options = $("#" + $lstBoxSelectedItems.attr('id') + ' option');
$("#" + $txtHiddenIDs.attr('id') + '').val('');
options.each(function () {
$("#" + $txtHiddenIDs.attr('id') + '').val($("#" + $txtHiddenIDs.attr('id') + '').val() + ',' + $(this).val());
})
});

$.fn.sort_select_box = function () {
$.fn.sort_select_box = function () {
var my_options = $("#" + this.attr('id') + ' option');
my_options.sort(function (a, b) {
if (a.text > b.text) return 1;
else if (a.text < b.text) return -1;
else return 0
})
$(this).empty().append(my_options);
$("#" + this.attr('id') + " option").attr('selected', false);
}
}