drag and drop table rows matching

HTML

<div id="inventor">
<table>
    <tbody>
        <tr id="1"><td>Alexander Graham Bell</td></tr>
        <tr id="2"><td>Thomas Edison</td></tr>
        <tr id="3"><td>Nicholas Tesla</td></tr>
    </tbody>
</table>
</div>
<form>
    <div id="invention">
        <table>
        <tbody>
        <tr><td><input name="answer1" />Tesla coil</td><td>Explanation</td></tr>
        <tr><td><input name="answer2" />Telephone</td><td>Explanation</td></tr>
        <tr><td><input name="answer3" />Phonograph</td><td>Explanation</td></tr>
        <tr><td><input name="answer4" />Light bulb</td><td>Explanation</td></tr>
        </tbody>
        </table>
    </div>
</form>

CSS

div { float: left; margin-left: 10px }
td { padding:2px; border:1px solid black }

JavaScript

$(document).ready(function(){

    //this will hold reference to the tr we have dragged and its helper
    var c = {};

    $("#inventor tr").draggable({
            helper: "clone",
            start: function(event, ui) {
                c.tr = this;
                c.helper = ui.helper;
            }
    });


    $("#invention tr").droppable({
        drop: function(event, ui) {
            var inventor = ui.draggable.text();
            $(this).find("input").val(inventor);

            $(c.tr).remove();
            $(c.helper).remove();
        }
    });

});