JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>Contact #</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<form action="" method="post">
    <p>
        <label for="form_fname">First Name:</label>
        <input type="text" id="form_fname" name="form_fname">
    </p>
    <p>
        <label for="form_lname">Last Name:</label>
        <input type="text" id="form_lname" name="form_lname">
    </p>
    <p>
        <label for="form_email">Email:</label>
        <input type="email" id="form_email" name="email">
    </p>
    <p>
        <label for="form_phone">Phone #:</label>
        <input type="phone" id="form_phone" name="form_phone">
    </p>
    <p>
        <input type="submit" value="Add User" />
    </p>
</form>

JavaScript

$(document).ready(function () {

        $('form').submit(function (event) {
            event.preventDefault();
            var $td = $('tbody tr td');
            $('input', this).each(function (i) {
                $td.eq(i).text(this.value);
            });
        });
    });