Insert row after row that was clicked on

Clicking on a row will trigger the jQuery code to insert a jQuery-generated row after the row that was clicked on. The new row will have colspan equal to the number of columns in the "parent" table and will contain a table holding the new data.

HTML

<table id="tblMovieList" style="display: table;">
    <thead>
        <tr class="tableHeader">
            <th></th>
            <th>
                <input type="submit" id="btnDeleteMovies" value="Delete" title="Delete the selected movies"
                class="button ui-button ui-widget ui-state-default ui-corner-all" role="button"
                aria-disabled="false">
            </th>
            <th>Title</th>
            <th>Director</th>
            <th>Length
                <br>(in mins)</th>
            <th>MPAA
                <br>Rating</th>
            <td>Year
                <br>Released</td>
            <th>Synopsis</th>
            <th>Format</th>
            <th>Release
                <br>Status</th>
            <th>My Rating</th>
        </tr>
    </thead>
    <tbody>
        <tr class="viewMovieRow alt" title="Click to view actors for this movie"
        style="cursor: default;">
            <td class="listEditMovie"><a class="linkEditMovie" name="22" href="#">Edit</a>

            </td>
            <td class="listDeleteMovie">
                <input type="checkbox" class="chkDeleteMovie" name="deleteMovies[]" value="22">
            </td>
            <td class="listMovieTitle">A Test</td>
            <td class="listMovieDirector">Some Director</td>
            <td class="listMovieLength">23</td>
            <td class="listMovieMpaaRating">PG</td>
            <td class="listMovieYearReleased">2013</td>
            <td class="listMovieSynopsis">Testing adding movie new actor</td>
            <td class="listMovieFormat">DVD</td>
            <td class="listMovieReleaseStatus">Own it</td>
            <td class="listMovieMyRating">Good</td>
        </tr>
        <tr class="viewMovieRow" title="Click to view actors for this movie" style="cursor: default;">
            <td class="listEditMovie"><a class="linkEditMovie" name="20" href="#">Edit</a>

            </td>
            <td class="listDeleteMovie">
                <input type="checkbox"...

CSS

body {
    font-size: small;
}
table, tbody, tfoot, thead, tr, th, td {
    border: 1px solid #CCC;
    padding: 5px;
}

JavaScript

$('#tblMovieList').on('click', ' tbody tr', function () {
        // Remove any existing actor rows (there should only be one in the table at a time)
        //    Neither of the following lines works
        //$('#tblMovieList').find('tr#actorsForMovie').remove();
        //$('tr#actorsForMovie').remove();
        
	    var movieID = $(this).find('input.chkDeleteMovie').val();

	    GetActorsForSelectedMovie(movieID);
	    return false;
	});

	function GetActorsForSelectedMovie(movieID) {
	    // $.ajax call gets rows from php script

	    var row = $('#tblMovieList tbody tr').find('td input.chkDeleteMovie[value="' + movieID + '"]').parent().parent();
	    var newRowTable = $('<table id="tblActorsForMovie"></table>');

	    //$.each(data, function (index, element) {
	    newRowTable.append('<td width="113px"></td><td>actorID: 12, name: Some Actor</td>');
	    //});

	    row.after(newRowTable.wrap('<tr id="actorsForMovie"><td colspan="10"><td></tr>'));
	}
/* inserted row should look like the following
<tr id="actorsForMovie">
    <td colspan="10"> <!-- There are 10 rows in the "parent" table -->
        <table>
            <tr>
                <td>
                    [actor data]
                </td>
            </tr>
            <tr>
                <td>
                    [actor data]
                </td>
            </tr>
            ... etc for additional rows/actors
        </table>
    </td>
</tr>
*/