JSFiddle - React, Tailwind, and code Playground

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>Nikola 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 () {

    $("#inventor tr").draggable({
        helper: "clone"
    });

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

            $(ui.draggable).remove();
            $(ui.helper).remove();
        }
    });

});