JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
</head>
<body>
<table>
    <tr>
        <td>
            <select id="listboxFootballPlayers" size="5" multiple="multiple" style="width: 200px;">
            <option value="l1">Cristiano Ronaldo</option>
            <option value="l2">Ricardo Kaka</option>
            <option value="l3">Lionel Messi</option>
            <option value="l4">Gerd Muller</option>
            <option value="l5">Johan Crujjf</option>
            <option value="l6">Franz Beckenbauer</option>
            <option value="l7">David Beckham</option>
            </select>
        </td>
                            
        <td>
            <table>
                <tr><td><input type="button" id="btnAddFootballPlayerToList" value="->" /> </td></tr>
                <tr><td><input type="button" id="btnRemoveFootballPlayerFromList" value="<-" /></td></tr>
            </table>
        </td>
                            
        <td>
            <select id="selectedFootballPlayers" size="5" multiple="multiple" style="width: 200px;">
            </select>
        </td>
    </tr>
</table>
</body>
</html>

JavaScript

var selectedAddFootballPlayerId = '';
var selectedAddFootballPlayerName = '';
var selectedRemoveFootballPlayerId = '';
var selectedRemoveFootballPlayerName = '';

$(document).ready(function() {
    $('#listboxFootballPlayers option').live('click', function() {
        selectedAddFootballPlayerId = $(this).attr('value');
        selectedAddFootballPlayerName = $(this).text();
    });
    $('#selectedFootballPlayers option').live('click',
    function() {
        selectedRemoveFootballPlayerId = $(this).attr('value');
        selectedRemoveFootballPlayerName = $(this).text();
    });
    $('input#btnAddFootballPlayerToList').click(function() {
        if (selectedAddFootballPlayerId == '') {
            alert("Select a football player to be added from the list.");
        } else {
            var option = new Option(selectedAddFootballPlayerName, selectedAddFootballPlayerId);
            $(option).html(selectedAddFootballPlayerName);
            $('#selectedFootballPlayers').append(option);
            $('#listboxFootballPlayers option:selected').remove();
                        $("<input type='hidden' value=selectedAddFootballPlayerId>");
            selectedAddFootballPlayerId = '';
            selectedAddFootballPlayerName = '';
        }
    });
    $('input#btnRemoveFootballPlayerFromList').click(function() {
        if (selectedRemoveFootballPlayerId == '') {
            alert("Select a football player to be removed from the list.");
        } else {
            var option = new Option(selectedRemoveFootballPlayerName, selectedRemoveFootballPlayerId);
            $(option).html(selectedRemoveFootballPlayerName);
            $('#selectedFootballPlayers option:selected').remove();
            $('#listboxFootballPlayers').append(option);
            selectedRemoveFootballPlayerId = '';
            selectedRemoveFootballPlayerName = '';
        }
    });
});