dual listbox with dropdown

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>






<form class="form" action="##" method="post" id="banktabForm">
  <div class="selectContainer" id="bankTab">
    <select multiple="multiple" name="bankList" id="firstData">
      <option name="opt1" value="AB">Allahabad Bank</option>
      <option name="opt2" value="AN">Andhra Bank</option>
      <option name="opt3" value="BI">Bank of India</option>
      <option name="opt4" name="opt3" value="BB">Bank of Baroda</option>
    </select>
  </div>
  <div class="form-group">
    <div class="col-xs-12">
      <br>
      <button class="btn btn-lg btn-success alltabsubmit" type="submit" id="firstId" onclick="showgroup_id();"><i class="glyphicon glyphicon-ok-sign"></i>Submit</button>
      <button class="btn btn-lg alltabreset" type="reset" id="tabReset"><i class="glyphicon glyphicon-repeat"></i> Reset</button>
    </div>
  </div>
</form>

<!--/tab-pane-->
<div class="tab-pane" id="cashTab">
  <form class="form" action="##" method="post" id="cashtabForm">
    <div class="cashContainer" id="cashTab">
      <select multiple="multiple" name="cashList" id="cashList">
        <option value="AB">Allahabad Bank</option>
        <option value="AN">Andhra Bank</option>
        <option value="BI">Bank of India</option>
        <option value="BB">Bank of Baroda</option>
      </select>
    </div>
    <div class="form-group">
      <div class="col-xs-12">
        <br>
        <button class="btn btn-lg btn-success alltabsubmit" type="submit" onclick="selList();"><i class="glyphicon glyphicon-ok-sign"></i>Submit</button>
        <button class="btn btn-lg alltabreset" type="reset" id="tabReset"><i class="glyphicon...

JavaScript

var val = new Array();
(function($) {
  function refresh_select($select) {
    // Clear columns
    $select.wrapper.selected.html('');
    $select.wrapper.non_selected.html('');

    // Get search value
    if ($select.wrapper.search) {
      var query = $select.wrapper.search.val();
    }

    var options = [];

    // Find all select options
    $select.find('option').each(function() {
      var $option = $(this);
      var value = $option.prop('value');
      var label = $option.text();
      var selected = $option.is(':selected');

      options.push({
        value: value,
        label: label,
        selected: selected,
        element: $option,
      });
    });

    // Loop over select options and add to the non-selected and selected columns
    options.forEach(function(option) {
      var $row = $('<a tabindex="0" role="button" class="item"></a>').text(option.label).data('value', option.value);
      // Create clone of row and add to the selected column
      if (option.selected) {
        $row.addClass('selected');
        var $clone = $row.clone();

        // Add click handler to mark row as non-selected
        $clone.click(function() {
          // to remove disabled class from item
          option.element.prop('selected', false);
          val.pop(option.label);
          $('.non-selected-wrapper .item.selected').each(function() {
            var $item_values = $(this).text();
            if ($.inArray($item_values, val) == -1) {
              $(this).removeClass('selected');
            }
          });
          $select.change();
        });


        // Add key handler to mark row as selected and make the control accessible
        $clone.keypress(function() {
          if (event.keyCode === 32 || event.keyCode === 13) {
            // Prevent the default action to stop scrolling when space is pressed
            event.preventDefault();
            option.element.prop('selected', false);
            $select.change();
          }
        });
   ...