JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div>
        <h2 id="title">Event Management System</h2>
    </div>
</div>
<br><br>
  <div class="dropdown">
    <label>Event : <label/>
    <select name="event" id="dd-event" required>
      <option value="0" selected>Event</option>
      <?php foreach($retrieve as $r): ?>
      <option value="<?=$r['event_id']?>"><?=$r['event_name']?></option>
      <?php endforeach ?>
    </select>
  </div>
<br>
<div class="main">
    <div class="add-guest-contain">
        <tbody>
            <table class="contact-names">
                <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody class="contact-list">
                    <tr>
            <td class='name-row'><span style='font-size:14px;'>$salute $fname $lname</span></td>
        </tr><tr>
            <td class='name-row'><span style='font-size:14px;'>$salute $fname $lname</span></td>
        </tr><tr>
            <td class='name-row'><span style='font-size:14px;'>$salute $fname $lname</span></td>
        </tr>
                </tbody>
            </table>
        </tbody>
    </div>
    <div class="guest-list-contain">
        <tbody>
            <table class="guest-list">
                <thead>
                    <tr>
                        <th>Guest Name</th>
                    </tr>
                </thead>
                <tbody class="guest-names">
                </tbody>
            </table>
        </tbody>
    </div>
    <div class="container-buttons">
        <div class="contain-buttons">
            <input type="button" value=">" id="moveright" class="move">
            <br><br>
            <input type="button" value="<" id="moveleft" class="move">
        </div>
    </div>
</div>

JavaScript

$(document).ready(function()
    { alert("jQuery fired.");
        $(".container-buttons").hide();
        $("#dd-event").change(function(){
            if($(this).val() == "0")
            {   
                var msg = "<span>Please select an event.</span>";
                $(".contact-list").append(msg);
                $(".guest-names").append(msg);
            }
            else
            {
                $(".contact-list").load("showUser.php");
                $(".container-buttons").show();
                $(".guest-names").empty(msg);
                
                
                $(".contact-list .name-row").on("click",function(){
                    alert("clicks.");
                });
            }
        });
        $("#dd-event").trigger('change');
    });