JSFiddle - React, Tailwind, and code Playground

by ansonhoyt

HTML

<table id="data">
    <thead>
        <tr>
            <th>(select)</th>
            <th>ReviewId</th>
            <th>Description</th>
            <th>Severity</th>
            <th>Status</th>
            <th>CreatedBy</th>
            <th>createDate</th>
            <th>FixedBy</th>
            <th>ClosedDate</th>
            <th>Effort</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="radio" name="selected-row" value="1" /></td>
            <td>ReviewId 1</td>
            <td>Description 1</td>
            <td>Severity 1</td>
            <td>Status 1</td>
            <td>CreatedBy 1</td>
            <td>createDate 1</td>
            <td>FixedBy 1</td>
            <td>ClosedDate 1</td>
            <td>Effort 1</td>
            <td>Category 1</td>
        </tr>
        <tr>
            <td><input type="radio" name="selected-row" value="2" /></td>
            <td>ReviewId 2</td>
            <td>Description 2</td>
            <td>Severity 2</td>
            <td>Status 2</td>
            <td>CreatedBy 2</td>
            <td>createDate 2</td>
            <td>FixedBy 2</td>
            <td>ClosedDate 2</td>
            <td>Effort 2</td>
            <td>Category 2</td>
        </tr>
    </tbody>
</table>

<button id="edit">Edit</button>

<div id="editor">
    <h4>Editor</h4>
    <label for="ReviewId">ReviewId</label>
    <input type="text" name="ReviewId" id="ReviewId" /><br>
    <label for="Description">Description</label>
    <input type="text" name="Description" id="Description" /><br>
    <label for="Severity">Severity</label>
    <input type="text" name="Severity" id="Severity" /><br>
    <label for="Status">Status</label>
    <input type="text" name="Status" id="Status" /><br>
    <label for="CreatedBy">CreatedBy</label>
    <input type="text" name="CreatedBy" id="CreatedBy" /><br>
    <label for="createDate">createDate</label>
    <input type="text" name="createDate" id="createDate" /><br>
   ...

CSS

#editor {
    border: 1px solid black;
    background-color: #eee;
}

JavaScript

$('#edit').click(function populateEditor(event) {
    console.log("Populating the editor");
    var selectedRadio = $('table#data input[name=selected-row]:radio:checked');
    var selectedRow = $(selectedRadio).parents('table#data tr');
    var reviewId, description, severity, status, createdBy, createDate, fixedBy, closedDate, effort, category;
});