jQuery UI Datepicker (change event)

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<h1>Student Info:</h1>

<form class="data-form">
    <label>Student ID
        <input type="text" />
    </label>
    <label>First Name
        <input type="text" />
    </label>
    <label>Last Name
        <input type="text" />
    </label>
    <label>Year Level
        <input type="text" />
    </label>
</form>
<table class="data-table" id="test">
    <thead>
        <tr>
            <th>Student ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Year Level</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>Frank</td>
        <td>Sinatra</td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Miles</td>
        <td>Davis</td>
        <td>4</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Tom</td>
        <td>Waits</td>
        <td>6</td>
    </tr>
</table>

JavaScript

$(document).ready(function () {
    $("td", this).on("click", function () {
        var tds = $(this).parents("tr").find("td");
        $.each(tds, function (i, v) {
            $($(".data-form input")[i]).val($(v).text());
        });
    });
});