JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id="MatchForm">
    <table id="CreateMatch">
        <tr>
            <th>Prospect</th>
            <th></th>
            <th>Opponent</th>
            <th>Match Date</th>
            <th>Location</th>
        </tr>
        <tr>
            <td>
                <select name="Prospect">
                    <option value="">Select prospect...</option>
                    <option>Test</option>
                </select>
            </td>    
            <td>vs</td>
            <td>
                <select name="opponent">
                    <option value="">Select opponent...</option>
                    <option>Test</option>
                </select>                    
            </td>
            <td><input type="text" class="Datetime" name="matchDate" style="width:100px" /></td>
            <td><input type="text" id="Location" name="Location" style="width:100px" /></td>
        </tr>
    </table>
    <input type="button" name="AddAnother" id="AddAnother" value="Add Another" />
    <input type="submit" name="submit" value="Submit" />
</div>

JavaScript

$(function() {
    $('#AddAnother').bind('click', function(event) {
        $('#CreateMatch tr:last').clone().appendTo('#CreateMatch')
                                 .find('input.Datetime')
                                 .removeClass('hasDatepicker');
    });

    $('input.Datetime').live('click', function() {
        $(this).datepicker({
            showOn: 'focus',
            changeMonth: true,
            changeYear: true,
            dateFormat: "dd-mm-yy"
        }).focus();
    });

});