JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://labo.tristan-jahier.fr/chosen_order/chosen.order.jquery.min.js"></script>

<select id= "myselect" name="myselect" multiple style="width: 500px;">
        <option value="banane">Banane</option>
        <option value="pomme">Pomme</option>
        <option value="poire">Poire</option>
        <option value="ananas" selected>Ananas</option>
        <option value="kiwi" selected>Kiwi</option>
        <option value="goyave">Goyave</option>
        <option value="abricot">Abricot</option>
        <option value="fraise" selected>Fraise</option>
        <option value="framboise">Framboise</option>
        <option value="avocat" selected>Avocat</option>
</select>

<div id="myModalmovealias" class="modalmovealias">
  <div class="modal-content-movealias">
    <span class="closemovealias">&times;</span>
      <button id="removemodelnumber">Remove</button>
  </div>
</div>

CSS

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modalmovealias {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content-movealias {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.closemovealias {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.closemovealias:hover,
.closemovealias:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

JavaScript

$(document).ready(function () {

  $("#myselect").select2();

  var vals = [];
  var mvaliasmodal = document.getElementById('myModalmovealias');
  var mvaliasspan = document.getElementsByClassName("closemovealias")[0];
  var MY_SELECT = $('#myselect').select2("data");//$('select[multiple].chosen').get(0);
  var selection = "";

  function unselect() {  
    vals = [];
    alert("Selection : "+selection);
    $(selection).each(function(i) {
      vals.push(selection[i]);	
    })
    for (index = 0; index < vals.length; index++) {
      if ( index == ((vals.length) - 1) ) {
        vals.splice(index, 1);
      }
    }
    alert ("Vals : "+vals);
    $("#myselect").val(vals).trigger("change")
  }

  function wasDeselected (sel, val) {
    if (!val) {
      return true;      
    }
    return sel && sel.some(function(d) { return val.indexOf(d) == -1; })
  }

  mvaliasspan.onclick = function() {
      mvaliasmodal.style.display = "none";
  }

  window.onclick = function(event) {
      if (event.target == mvaliasmodal) {
          mvaliasmodal.style.display = "none";
      }
  }

  $("#removemodelnumber").on('click', function (){
      unselect()
      mvaliasmodal.style.display = "none"
  });

  $("#myselect").on('change', function (event) {
        var $select = $(event.target),
            val     = $("#myselect").val(),
            sel     = $('#myselect').data('selected');

        $select.data('selected', val);

        if (! (wasDeselected(sel, val)) ) {
          selection = $("#myselect").val();
          alert("SAI :: "+ selection);
          mvaliasmodal.style.display = "block";
        }
  });
});