JQUERY: multiselect list swap

README.md

• @license
• Multiselect v1
• https://gist.github.com/mazfreelance/568f770e45f6c8cc028157e0fe2e38f7
• Copyright (c) 2019 MAZ Tech
• Licensed under the MIT license

multiselect.html

<!--
 * @license
 *
 * Multiselect v1
 * https://gist.github.com/mazfreelance/568f770e45f6c8cc028157e0fe2e38f7
 *
 * Copyright (c) 2019 MAZ Tech
 * Licensed under the MIT license
-->
<div class="row">
    <div class="col-sm-5">
        <select id="lstview" size="20" multiple="multiple" class="form-control m-input m-input--air" data-target="available">
          <option class="value1">value1</option>
          <option class="value2">value2</option>
          <option class="value3">value3</option>
          <option class="value4">value4</option>
          <option class="value5">value5</option>
        </select>
    </div>

    <div class="col-sm-2 my-auto">
        <button type="button" id="lstview_rightSelected" class="btn btn-success btn-block"><i class="la la-angle-double-right"></i></button>
        <button type="button" id="lstview_leftSelected" class="btn btn-danger btn-block"><i class="la la-angle-double-left"></i></button>
    </div>

    <div class="col-sm-5">
        <select id="lstview_to" size="20" multiple="multiple" class="form-control m-input m-input--air" data-target="assigned" placeholder="Search for assigned"></select>
    </div>
</div>

multiselect.js

/*
 * @license
 *
 * Multiselect v1
 * https://gist.github.com/mazfreelance/568f770e45f6c8cc028157e0fe2e38f7
 *
 * Copyright (c) 2019 MAZ Tech
 * Licensed under the MIT license
 */
// assign new data
$('#lstview_rightSelected').on('click', function(){
    //$('#lstview_to option').remove(); //if you want to remove previous option
    var arrData  = [];
    $('#lstview option').each(function(){
        if($(this).is(':checked'))
        {
            arrData.push($(this).val());
            $('#lstview_to').append($(this).clone());
            $(this).remove(); //if you want to remove from current list
        }
    });

    var formData = {assign:arrData};
    console.log(formData);
});

// remove current data
$('#lstview_leftSelected').on('click', function(){
    //$('#lstview option').remove(); //if you want to remove previous option
    var arrData  = [];
    $('#lstview_to option').each(function(){
        if($(this).is(':checked'))
        {
            arrData.push($(this).val());
            $('#lstview').append($(this).clone());
            $(this).remove(); //if you want to remove from current list
        }
    });
    var formData = {remove:arrData};
    console.log(formData);
});

$( document ).ready(function() {
  /**
  * optional use ...
  * multiselect()
  * Multiselect v2.5.5
  * http://crlcu.github.io/multiselect/
  * Description: search specific data for each select.
  */
  $('#lstview').multiselect({
      search: {
          left: '<input type="text" name="q" class="form-control m-input m-input--air mb-2" placeholder="Search for available" autocomplete="no"/>',
          right: '<input type="text" name="q" class="form-control m-input m-input--air mb-2" placeholder="Search for assigned" autocomplete="no"/>',
      }
  });
});