Pre-populate selected options box with already submitted players from DB and submit only new signups

I’m trying to build a signup system where I select names from the left column and add them to the right column, that much works. I’ve also been successful at having the right column pre-populated with already selected names from a previous submit. What I am struggling with is getting the left and right lists to refresh when I select a new value for game_date from the drop-down.

Here is my existing code:

<!DOCTYPE html>
    <title>Player Selection</title>
        .container {
            display: flex;
            justify-content: space-between;
        .list-box {
            width: 200px;
            height: 400px;
let btnRight = document.getElementById('moveRight');
let btnLeft = document.getElementById('moveLeft');

btnRight.addEventListener('click', function()

btnLeft.addEventListener('click', function()
        function moveSelectedPlayers(direction) {
            var sourceSelect, targetSelect;

            if (direction === 'right') {
                sourceSelect = document.getElementById('available_players');
                targetSelect = document.getElementById('selected_players');
            } else if (direction === 'left') {
                sourceSelect = document.getElementById('selected_players');
                targetSelect = document.getElementById('available_players');

            let selectedOptions = [];
            for (let i = 0; i < sourceSelect.selectedOptions.length; i++) {
            for(let opt of selectedOptions)
    <h1>Register Players for Game</h1><br>
    <h2>Select Game Date:</h2>
    <form method="post" action="do_signup.php">
    <select name="game_id" id="game_id">
           include "db_open.php";
           // Create a database connection
           $conn = mysqli_connect($host, $username, $password, $database);

           if (!$conn) {
               die("Connection failed: " . mysqli_connect_error());
           //Fetch game_id and game_date from game table
           $query1 = "SELECT game_date, game_id FROM game";
           $result1 = mysqli_query($conn, $query1);

           if (mysqli_num_rows($result1) > 0) {
               while ($row = mysqli_fetch_assoc($result1)) {
                   echo '<option value="' . $row['game_id'] . '">' . $row['game_date'] . '</option>';
<h2>Select Players</h2>
    <div class="container">
        <select id="available_players" multiple="true" class="list-box">
            // Fetch player data from the 'players' table and order by last_name
            $query2 = "SELECT player_id, last_name, first_name FROM players where player_id not in (select player_id from signup) ORDER BY last_name";
            $result2 = mysqli_query($conn, $query2);

            if (mysqli_num_rows($result2) > 0) {
                while ($row = mysqli_fetch_assoc($result2)) {
                    echo '<option value="' . $row['player_id'] . '">' . $row['last_name'] . ', ' . $row['first_name'] . '</option>';
            <button type="button" id="moveRight" onclick="moveSelectedPlayers('right')">Add &rarr;</button>
            <button type="button" id="moveLeft" onclick="moveSelectedPlayers('left')">&larr; Remove</button>
        <select id="selected_players" name="selected_players[]" multiple="true" class="list-box">
        // Fetch player data from the 'signup' table and order by last_name
            $query3 = "SELECT signup.player_id, players.last_name, players.first_name from players inner join signup on players.player_id = signup.player_id where players.player_id = signup.player_id order by players.last_name";
            $result3 = mysqli_query($conn, $query3);

            if (mysqli_num_rows($result3) > 0) {
                while ($row = mysqli_fetch_assoc($result3)) {
                    echo '<option value="' . $row['player_id'] . '">' . $row['last_name'] . ', ' . $row['first_name'] . '</option>';
            // Close the database connection
        <input type="submit" value="Submit">

I’ve read several StackOverflow pages that describe how it could be done, but they’re a bit confusing to a javascript novice such as myself. I tried to add a an onSelect action to the game_id select but that didn’t work. I’m fairly certain that I’m on the right track there, but I don’t know how to craft the function that it should be calling.