Serializing Dual Listbox

by Jq7LxKdg

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-xs-4">
    Items to select
    <select id="lstBox1" multiple="multiple" class="form-control" size=10>
        <option value="1">Test 1</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>
<div class="col-xs-2">
    Buttons
    <a id="btnRight" class="btn btn-block btn-primary">&#8594;</a>
    <a id="btnLeft" class="btn btn-block btn-primary">&#8592;</a>

</div>

<div class="col-xs-4">
    Selected Items
    <select id="lstBox2" multiple="multiple" class="form-control" size=10>
        
    </select>
</div>

    <input id="values" class="form-control" placeholder="Output IDs separated by commas here">

JavaScript

$(document).ready(function() {
    $('#btnRight').click(function(e) {
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox2').append($(selectedOpts).clone());
        //$(selectedOpts).remove();
        e.preventDefault();
        updateIDs();
    });

    $('#btnLeft').click(function(e) {
        var selectedOpts = $('#lstBox2 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        //$('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
        updateIDs();
    });
});

function updateIDs(){
    $('#values').val('');
   $('#lstBox2 option').each(function(index) {
       console.log($(this).val());
       $('#values').val($('#values').val()+$(this).val()+",");
    });
}