JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>Liste des fruits :<br />
      <select id="liste_fruits" size="8" style="width:90px;" multiple="multiple">
                <option value="ananas">Ananas</option>
                <option value="banane">Banane</option>
                <option value="citron">Citron</option>
                <option value="fraise">Fraise</option>
                <option value="orange">Orange</option>
                <option value="pomme">Pomme</option>
                <option value="raisin">Raisin</option>
            </select>
    </td>
    <td>
      <button id="ajouter" disabled="disabled">Ajouter</button><br />
      <button id="supprimer" disabled="disabled">Supprimer</button>
    </td>
    <td>Mon panier :<br />
      <select id="panier" size="8" style="width:90px;" multiple="multiple">
            </select>
    </td>
  </tr>
</table>

JavaScript

var $lst = $('#liste_fruits');
var $panier = $('#panier');
var $add = $('#ajouter');
var $delete = $('#supprimer');

function move($dest, $selected) {
  $dest.append('<option value="' + $selected.val() + '" >' + $selected.text() + '</option>');
  $selected.remove();
}

function add() {
  $('#liste_fruits option:selected').each(function() {
    move($panier, $(this));
  });
  $add.attr('disabled', true);
}

function remove() {
  $('#panier option:selected').each(function() {
    move($lst, $(this));
  });
  $delete.attr('disabled', true);
}
$(document).ready(function() {



  $lst.change(function() {
    $add.attr('disabled', false);
  });
  $panier.change(function() {
    $delete.attr('disabled', false);
  });
  $add.click(function() {
    add();
  });
  $delete.click(function() {
    remove();
  });
  $lst.keypress(function(event) {
    if (event.which == 13)
      add();
  });
  $panier.keypress(function(event) {
    if (event.which == 13)
      remove();
  });
});