JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
            <thead>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Contact #</th>
            </thead>

            <tbody>
                <tr>
                    
                </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="button" id="bnSubmit" value="Add User" />
            </p>
        </form>

JavaScript

$(document).ready(function(){
        
      $('form').submit(function(){

        var fname= $('input#form_fname').val(),
            lname = $('input#form_lname').val(),
            email = $('input#form_email').val(),
            phone = $('input#form_phone').val();
        
        $('tr').append('<td>'+fname+'</td>');

       });
        
        $("#bnSubmit").click(function(){
        
        
        var fname= $('input#form_fname').val(),
            lname = $('input#form_lname').val(),
            email = $('input#form_email').val(),
            phone = $('input#form_phone').val();
        
        $('tr').append('<td>'+fname+'</td>');

        });
        
    });