How to disable selected options from one list-box to another list box in JQuery?

(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() {
          option.element.prop('selected', false);
          $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();
          }
        });

        $select.wrapper.selected.append($clone);
      }

      // Add click handler to mark row as selected
      $row.click(function() {
        option.element.prop('selected', 'selected');
        $select.change();
      });

      // Add key handler to mark row as selected and make the control accessible
      $row.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', 'selected');
          $select.change();
        }
      });

      // Apply search filtering
      if (query && query != ''&& option.label.toLowerCase().indexOf(query.toLowerCase()) === -1) {
        return;
      }

      $select.wrapper.non_selected.append($row);

    });

  }


  $.fn.multi = function(options) {

    var settings = $.extend({
      'enable_search': true,'search_placeholder': 'Search...',
    }, options);


    return this.each(function() {

      var $select = $(this);

      // Check if already initalized
      if ($select.data('multijs')) {
        return;
      }

      // Make sure multiple is enabled
      if (!$select.prop('multiple')) {
        return;
      }

      // Hide select
      $select.css('display', 'none');
      $select.data('multijs', true);

      // Start constructing selector
      var $wrapper = $('<div class="multi-wrapper">');

      // Add search bar
      if (settings.enable_search) {
        var $search = $('<input class="search-input" type="text" />').prop('placeholder', settings.search_placeholder);

        $search.on('input change keyup', function() {
          refresh_select($select);
        })

        $wrapper.append($search);
        $wrapper.search = $search;
      }

      // Add columns for selected and non-selected
      var $non_selected = $('<div class="non-selected-wrapper">');
      var $selected = $('<div class="selected-wrapper" id="selectedList">');

      $wrapper.append($non_selected);
      $wrapper.append($selected);

      $wrapper.non_selected = $non_selected;
      $wrapper.selected = $selected;

      $select.wrapper = $wrapper;

      // Add multi.js wrapper after select element
      $select.after($wrapper);

      // Initialize selector with values from select element
      refresh_select($select);

      // Refresh selector when select values change
      $select.change(function() {
        refresh_select($select);
      });

    });

  }

})(jQuery);

$(document).ready(function() {
  $('select').multi({
    search_placeholder: 'Search',
  });

  $('.alltabreset').click(function() {
    $('.selected-wrapper').empty();
    $('a').removeClass('selected');
  });
});

.alltabsubmit {
  padding: 8px;
  font-size: 15px;
  line-height: 0.8;
  color: #fff;
  background-color: #680779;
  border-color: #680779;
  border-radius: 4px;
  position: relative;
  left: 43%;
}

.alltabreset {
  padding: 8px;
  font-size: 15px;
  line-height: 0.8;
  border-radius: 4px;
  position: relative;
  left: 43%;
  color: black;
  background-color: rgb(220, 215, 215);
  border-radius: 4px;
}

nav>.nav.nav-tabs {
  border: none;
  color: #fff;
  background: #272e38;
  border-radius: 0;
}

nav>div a.nav-item.nav-link,
nav>div a.nav-item.nav-link.active {
  border: none;
  padding: 10px 25px;
  color: #fff;
  background: #680779;
  border-radius: 0;
}

nav>div a.nav-item.nav-link.active:after {
  content: "";
  position: relative;
  top: 52px !important;
  right: 10% !important;
  border: 15px solid transparent;
  border-top-color: #680779;
}

.tab-content {
  background: #fdfdfd;
  line-height: 25px;
  border: 1px solid #ddd;
  border-top: 5px solid #dda0dd;
  border-bottom: 5px solid #dda0dd;
  padding: 30px 25px;
}

nav>div a.nav-item.nav-link:hover,
nav>div a.nav-item.nav-link:focus {
  border: none;
  background: #dda0dd;
  color: #fff;
  border-radius: 0;
  transition: 0.20s linear;
}

.tabContent {
  padding-top: 18px;
  margin-left: 10px;
  margin-right: 10px;
}


/* FIRST TAB*/

.multi-wrapper {
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  width: 70% !important;
  position: relative;
  left: 15%;
  top: 35%;
}

.multi-wrapper .non-selected-wrapper,
.multi-wrapper .selected-wrapper {
  box-sizing: border-box;
  display: inline-block;
  height: 300px !important;
  overflow-y: scroll;
  padding: 10px;
  vertical-align: top;
  width: 50%;
}

.multi-wrapper .non-selected-wrapper {
  background: #fafafa;
  border-right: 1px solid #ccc;
}

.multi-wrapper .selected-wrapper {
  background: #fff;
}

.multi-wrapper .item {
  cursor: pointer;
  display: block;
  padding: 5px 10px;
  color: #680779;
}

.multi-wrapper .item:hover {
  background: #ececec;
  border-radius: 2px;
}

.multi-wrapper .search-input {
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
  display: block;
  font-size: 1em;
  margin: 0;
  outline: 0;
  padding: 10px 20px;
  width: 100%;
}

.multi-wrapper .non-selected-wrapper .item.selected {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.multi-wrapper .non-selected-wrapper .row.selected:hover {
  background: inherit;
  cursor: inherit;
}


/* Third Tab */

.thirdTab {
  position: relative;
  left: 35%;
}

.pnl_slet {
  width: 22em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><html><body class="hold-transition sidebar-mini layout-fixed"><!-- Content Wrapper. Contains page content --><div class="content-wrapper"><section class="content"><div class="container-fluid"><!-- Main content --><section class="content"><div class="card card-default card-merge"><div class="card-body"><div class="tab-content"><div class="tab-pane active" id="bankTab"><h5>Box-1</h5><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><option name="opt5" value="BM">Bank of Maharashtra</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></div><!-- SECOND TAB --><div class="tab-pane" id="cashTab"><h5>Box-2</h5><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><option value="BM">Bank of Maharashtra</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 glyphicon-repeat"></i>Reset</button></div></div></form></div><!-- LAST TAB --><div class="tab-pane" id="tdsTab"><h5>Box-3</h5><form class="form" action="##" method="post" id="tdstabForm"><div class="cashContainer" id="tdsTab"><select multiple="multiple" name="tdsSel" id="tdsSel"><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><option value="BM">Bank of Maharashtra</option></select></div><div class="form-group"><div class="col-xs-12"><br><button class="btn btn-lg btn-success pull-right alltabsubmit" type="submit" onclick="tdsList();"><i class="glyphicon glyphicon-ok-sign"></i> Save</button><button class="btn btn-lg alltabreset" type="reset" id="tabReset"><i class="glyphicon glyphicon-repeat"></i> Reset</button></div></div></form></div></div></div></div></section></div></section></div></body></html>