dual list box problem by joe

by Joe

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<div class="col-sm-12">


  <div class="col-xs-4">
    Items to select
    <select id="lstBox1" style="width:40%" 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" style="width:20%">
    <a id="btnRight" class="btn btn-block btn-primary">Add</a>
    <a id="btnLeft" class="btn btn-block btn-primary">Remove</a>
    <a id="btnRightall" class="btn btn-block btn-primary">Add all</a>
    <a id="btnLeftall" class="btn btn-block btn-primary">Remove all</a>
  </div>

  <div class="col-xs-4" style="width:40%">
    Selected Items
    <select id="lstBox2" multiple="multiple" class="form-control" size=10>

    </select>
  </div>
</div>

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

CSS

.col-lg-3 {
  border: 1px solid;
}

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() + ",");
  });
}