JSFiddle - React, Tailwind, and code Playground

HTML

<form id="make_an_appointment" action="#" method="POST">
    <table>
        <tr>
            <th colspan='2'>
                <h1>Make an appointment</h1>
            </th>
        </tr>
        <tr>
            <td>
                <label for='appointment_date'>Date: </label>
            </td>
            <td>
                <input id='appointment_date' type='text' name='date' value='2012-01-08' />
            </td>
        </tr>
        <tr>
            <td>
                <label for='appointment_name'>Name: </label>
            </td>
            <td>
                <input id='appointment_name' type='text' name='name' value='Jonas' />
            </td>
        </tr>
        <tr>
            <td>
                <label for='appointment_reason'>Reason: </label>
            </td>
            <td>
                <textarea id='appointment_reason' name='reason'>Melanoma looking mole</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input id='sendMail' type='checkbox' checked='checked'/>
            </td>
            <td>
                <label for='sendMail'>Send an e-mail?</label>
            </td>
        </tr>
        <tr>
            <td colspan='2'>
                <input id='sendMail' type='submit' value='Send' />
            </td>
        </tr>
    </table>
</form>

<table id='appointment_list' cellspacing="2">
    <thead>
        <tr>
            <th>Date</th>
            <th>Name</th>
            <th>Reason</th>
            <th>Sent Mail?</th>
        </tr>
    </thead>
    <tbody>
        <tr class='id_3'>
            <td>2012-01-06</td>
            <td>Christine</td>
            <td>My foot is swelled up</td>
            <td>No</td>
        </tr>
        <tr class='id_2'>
            <td>2012-01-07</td>
            <td>James</td>
            <td>My teeth hurts</td>
            <td>Yes</td>
        </tr>
        <tr class='id_1'>
            <td>2012-01-05</td>
            <td>*undefined*</td>
           ...

CSS

#make_an_appointment table{
    border: 1px solid black;
    margin: 0 auto;
}

#make_an_appointment table td{
    padding: 2px;
}

h1{
    font-weight: bold;
}

table tr th{
    text-align: center;
}

table tr td:first-child{
    text-align: right;
}

#debug{
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 300px;
    height: 100px;
    overflow: auto;
    border: 1px solid gray;
}

JavaScript

var iNextID = 4;

$(document).ready(function(){

    $("#make_an_appointment").submit(function(){
        checkAppointmentAvailable($("#appointment_date").val());
        return false;
    });
                  
});

function checkAppointmentAvailable(sDate){
    /*
      Here I'm contacting the server page to check if the date is free.
      For the purposes of this example, I'll be checking the "appointment_list" table element on this page.
    */
    var bBusy = false;
    $("#appointment_list tr td:first-child").each(function(index, el){
        if(sDate == $(el).text()){
            bBusy = true;
        }
    });
    
    //Server page updated the table and returned a data object with the new id
    var oReturned = {
        "Error": null,
        "Message": iNextID
    };
    
    if(!bBusy){
        SendDebugMessage("An appointment has been created.");
        createAppointmentConfirm(oReturned);
        iNextID += 1;
    }else{
        SendDebugMessage("An appointment at that date has already been made");
    }
}

function RefreshAppointmentList(){
    //Do your refreshing i guess. I'm gonna update the table I've got in this example
    var sDate = $("#appointment_date").val();
    var sName = $("#appointment_name").val();
    var sReason= $("#appointment_reason").val();
    var sSentMail = "No";
    if($("#sendMail").is(":checked")) sSentMail = "Yes";
    
    var jNewRow = $("<tr class='id_"+iNextID+"'><td>"+sDate+"</td><td>"+sName+"</td><td>"+sReason+"</td><td>"+sSentMail+"</td></tr>");
    $("#appointment_list tbody").prepend(jNewRow);
    
    $("#appointment_date").val("");
    $("#appointment_name").val("");
    $("#appointment_reason").val("");
    $("#sendMail").attr("checked", false);
}

function createAppointmentConfirm(oData) {
    if (oData.Error) {
        alert(oData.Message);
    } else {
        if ($('#sendMail').is(":checked")) {
            SendMail(oData.Message);
        }
        RefreshAppointmentList();
    }
}

function...