Перемещение выделенных элементов несколько раз Выбор по Jquery в Struts Not Updating

Question

У меня есть два многократных окна выбора, использующих html: одно для SOURCE (слева) и другое для DESTINATION (справа). У меня есть 4 кнопки, переместить все вправо, переместить выбранную опцию вправо или влево или переместить все влево.

JSP:

Доступные аккаунты

            <div class="subject-info-arrows text-center" style="padding-top:15px;width:45px" >
                <br/><br/><br/><br/>
                <input type="image" id='btnAllRight' src="fw/html/image/sws/btnAddAll_H1.gif" style="width:17px;height:15px;"/><br/> 
                <input type="image" id='btnRight' src="fw/html/image/sws/btnAdd_H1.gif" style="width:17px;height:15px;"  /><br/>
                <input type="image" id='btnLeft' src="fw/html/image/sws/btnRemove_H1.gif" style="width:17px;height:15px;"/><br/>
                <input type="image" id='btnAllLeft' src="fw/html/image/sws/btnRemoveAll_H1.gif" style="width:17px;height:15px;" /><br/>
            </div>

            <div class="subject-info-box-2" style="width:${field_width}">
                <label>Accounts Selected</label>
                <html:select multiple="true" size="5" styleId="lstBox2" property="selectedAccounts" styleClass="form-control" disabled="${isReadOnlyMode}">
                    <html:optionsCollection property="selectedAccountsList" label="accountNum" value="id" /> 
                </html:select>
            </div>

Jquery:

    $('#btnRight').click(function (e) { 
        $('select').moveToListAndDelete('#lstBox1', '#lstBox2');
        alert("AFTER! source size: " + $('#lstBox1 option').length + "destination size: " + $('#lstBox2 option').length ); 
        $('[name="sourceSize"]').val($('#lstBox1 option').length);
        $('[name="destinationSize"]').val($('#lstBox2 option').length); 
        e.preventDefault();   
    });
    $('#btnLeft').click(function (e) {  
        $('select').moveToListAndDelete('#lstBox2', '#lstBox1');
        alert("AFTER! source size: " + $('#lstBox2 option').length + "destination size: " + $('#lstBox1 option').length ); 
        $('[name="sourceSize"]').val($('#lstBox2 option').length);
        $('[name="destinationSize"]').val($('#lstBox1 option').length);  
        e.preventDefault();  
    });
    $('#btnAllRight').click(function (e) {
        $("input[name=rightAllClicked]:hidden").val('true');
        alert("source size: " + $('#lstBox1 option').length + "destination size: " + $('#lstBox2 option').length +  $("input[name=rightAllClicked]:hidden").val() );    
        $('select').moveAllToListAndDelete('#lstBox1', '#lstBox2'); 
        $("lstBox1").val('');
        e.preventDefault();         
    }); 
    $('#btnAllLeft').click(function (e) {
        $('[name="leftAllClicked"]').val(true);
        alert("source size: " + $('#lstBox2 option').length + "destination size: " + $('#lstBox1 option').length +  $('[name="leftAllClicked"]').val());    
        $('select').moveAllToListAndDelete('#lstBox2', '#lstBox1');
        e.preventDefault();
    });  

JQuery JS:

//Moves selected item(s) from sourceList to destinationList and deleting the
// selected item(s) from the source list
$.fn.moveToListAndDelete = function (sourceList, destinationList) {   
    var opts = $(sourceList + ' option:selected');
    if (opts.length == 0) {
        alert("No account was selected");
    }
    $(opts).remove().appendTo($(destinationList));
};

//Moves all items from sourceList to destinationList and deleting
// all items from the source list
$.fn.moveAllToListAndDelete = function (sourceList, destinationList) {        
    var opts = $(sourceList + ' option');
    $(opts).remove();
    $(destinationList).append($(opts));
};

Каким-то образом выборки успешно перемещаются из источника в пункт назначения, но когда я сохраняю его (Struts Framework), я получаю обновленные параметры пункта назначения, но параметры источника остаются прежними, выбранный параметр не удаляется.

Я связываю его со свойствами java в форме, получаю правильное количество опций в поле «Назначение», но поле «Источник» остается тем же. Например, если у меня есть 3 элемента в источнике, я хочу переместиться в пункт назначения, размер пункта назначения станет 3, но источник также останется 3. Я ожидал, что это будет 0.

Я использую jquery Эсаусильвы:

https://esausilva.com/2016/01/29/move-items-between-two-listbox-using-jquery-html-select-tag/

jquery работает, но каким-то образом привязка к Java-бину не получает нужный размер: (