jQuery - moved item from one listbox to another cannot be accessed

Question

I am using jQuery to move items from one listbox to another using "Add" / "Remove" buttons' click events. On the screen I can see items move but when I put a breakpoint in the code and examine the content after move is complete, I don't see moved item(s). This affecting server side processing since I cannot get correct data.

<div class="row" id="zip">
    <div class="col-sm-10 col-sm-offset-2" style="padding-left: 0px;">
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="lbxUnassignedZips">All ZIPs</label>
                    <asp:ListBox runat="server" ID="lbxUnassignedZips" ClientIDMode="Static"></asp:ListBox>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group center-block text-center" style="margin: 0 -20px;">
                    <div class="form-group center-block" style="padding-top: 70px">
                        <button id="btnAddZip" type="submit" class="btn btn-default btn-block">Add&nbsp; <i class="fa fa-angle-double-right"></i></button>
                        <button id="btnRemoveZip" type="submit" class="btn btn-default btn-block"><i class="fa fa-angle-double-left"></i>&nbsp; Remove</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="lbxAssignedZips">Assigned ZIPs</label>
                    <asp:ListBox runat="server" ID="lbxAssignedZips" ClientIDMode="Static"></asp:ListBox>
                </div>
            </div>
        </div>
        <!--/.row -->
    </div>
</div>
<button id="btnSubmit" class="btn btn-primary" aria-hidden="true" aria-label="Submit">Submit</button>

Javascrip/jQuery

$(document).ready(function () {
    ....
    $('#btnAddZip').click(function () {
        var selectedOptions = $('#lbxUnassignedZips option:selected');

        if (selectedOptions.length == 0) {
            alert("Please select option to move");
            return false;
        }
        $('#lbxAssignedZips').append($(selectedOptions).clone());
        $(selectedOptions).remove();
        return false;
    });
// When I examine lbxUnassignedZips content after I moved one item to it using 
// this function, it still lists old items only!
    $('#btnRemoveZip').click(function () {
        var selectedOptions = $('#lbxAssignedZips option:selected');

        if (selectedOptions.length == 0) {
            alert("Please select option to move");
            return false;
        }
        $('#lbxUnassignedZips').append($(selectedOptions).clone());
        $(selectedOptions).remove();
        return false;
    });
});

$(document).on("click", "#btnSubmit", function (event) {debugger
    var isValid = validateUpdateSubmit();

    if (isValid) {
        var assignedZips = $('#lbxAssignedZips option').not('option:eq(-1)').map(function () {
            return this.innerHTML;
            }).get().join(',');

        // does not show newly added item
        var unassignedZips = $('#lbxUnassignedZips option').not('option:eq(-1)').map(function () {debugger
            return this.innerHTML;
            }).get().join(',');
        __doPostBack('btnubmit', "SaveUpdate");
        $('#editModal').modal('hide');
    }
    else
        return false;
});

Answer 1

Please look on below code. I have changed some jQuery code now you will have all items of listboxs

$(document).on("click", "#btnSubmit", function (event) {
    var isValid = validateUpdateSubmit();

        if (isValid) {

            var assignedZips = [];

            $('#lbxUnassignedZips').children("option").each(function () {
                var $this = $(this);
                assignedZips.push($this.text() + "," + $this.val());
            });

            alert("AssignedZips  => " + lbxUnassignedZips.join());

            var lbxUnassignedZips = [];

            $('#lbxUnassignedZips').children("option").each(function () {
                var $this = $(this);
                lbxUnassignedZips.push($this.text() + "," + $this.val());
            });

            alert("AssignedZips  => " + lbxUnassignedZips.join());


        __doPostBack('btnubmit', "SaveUpdate");
        $('#editModal').modal('hide');

    }
    else
        return false;
        });