maykinmedia / dual-listbox no value passed after form submission - codeigniter

Question

im trying to implement maykinmedia/dual-listbox in my CI application, the plugin is working fine, but when i submit the form, the $_POST variable doesn't contain any value. I can provide the javascript part, but it is the standard init for the plugin, the data are passed by the CI controller. Please help. Below the html part, in this case is missing the name from the select tag, but even adding it, doesn't change the result.
<select id="data" class="kt-dual-listbox" multiple
data-available-title="Source Options"
data-selected-title="Destination Options"
data-add="<i class='flaticon2-next'></i>"
data-remove="<i class='flaticon2-back'></i>"
data-add-all="<i class='flaticon2-fast-next'></i>"
data-remove-all="<i class='flaticon2-fast-back'></i>"
>
<?php foreach ($contents_data_data as $content_data_data){ ?>
<option value="<?= $content_data_data->id ?>"><?= $content_data_data->name ?></option>
<?php } ?>
</select>
Class definition
var KTDualListbox = function () {
// Private functions
var initDualListbox = function () {
// Dual Listbox
var listBoxes = $('.kt-dual-listbox');
listBoxes.each(function(){
var $this = $(this);
var id = '#' + $this.attr('id');
// get titles
var availableTitle = ($this.attr('data-available-title') != null) ? $this.attr('data-available-title') : 'Available options';
var selectedTitle = ($this.attr('data-selected-title') != null) ? $this.attr('data-selected-title') : 'Selected options';
// get button labels
var addLabel = ($this.attr('data-add') != null) ? $this.attr('data-add') : 'Add';
var removeLabel = ($this.attr('data-remove') != null) ? $this.attr('data-remove') : 'Remove';
var addAllLabel = ($this.attr('data-add-all') != null) ? $this.attr('data-add-all') : 'Add All';
var removeAllLabel = ($this.attr('data-remove-all') != null) ? $this.attr('data-remove-all') : 'Remove All';
// get options
var options = [];
$this.children('option').each(function(){
var value = $(this).val();
var label = $(this).text();
var selected = ($(this).is(':selected')) ? true : false;
options.push({ text: label, value: value, selected: selected });
});
// get search option
var search = ($this.attr('data-search') != null) ? $this.attr('data-search') : "";
// clear duplicates
$this.empty();
// init dual listbox
var dualListBox = new DualListbox(id,{
addEvent: function(value) {
console.log(value);
},
removeEvent: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addButtonText: addLabel,
removeButtonText: removeLabel,
addAllButtonText: addAllLabel,
removeAllButtonText: removeAllLabel,
options: options
});
if (search == "false"){
dualListBox.search.classList.add('dual-listbox__search--hidden');
}
});
}
return {
// public functions
init: function() {
initDualListbox();
}
};
}();

Answer 1

commenting this line
$this.empty();
in the javascript file, solve the issue; but then the source options list will show 2 times the same option.