JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr><th>id</th><th>column 1</th><th>column 2</th></tr>
    </thead>
    <tbody>
        <tr><td>0</td><td>cell 1</td><td>cell 2</td></tr>
    </tbody>
</table>
<form action="" method="post">
    <input type="text" name="id" value="" />
    <input type="text" name="cell1" value="" />
    <input type="text" name="cell2" value="" />
</form>

CSS

table {
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 10px
}
th, td {
    border: solid 1px black;
    padding: 3px
}
th {
    font-weight: bold
}
td {
    cursor: pointer
}

JavaScript

$(function() {
    initTable();

    // event handler which gets the values of the clicked row
    $("table").on("click", "tbody>tr", function() {
        var row = $(this),    // clicked row
            cells = row.find("td"),
            form = $("form");

        form.find("input[name=\"id\"]").val(cells.eq(0).text());
        form.find("input[name=\"cell1\"]").val(cells.eq(1).text());
        form.find("input[name=\"cell2\"]").val(cells.eq(2).text());
    });
});


// just create some clones from the first row
function initTable() {
    var i = 1,
        l = 20,
        tbody = $("tbody"),
        template = tbody.find("tr:first"),
        row;

    for (; i < l; i++) {
        row = template.clone();
        row.find("td:first").text(i);

        row.appendTo(tbody);
    }
}