table_select_form

by bvotcode

HTML

<form id="myForminput" method="post" target="_parent">
<table id="tableofform" border="0" style=" width: 500px; border: thick; font-family: Verdana; font-size: medium; background-color: lightblue;">

                 <tr>
                <td class="tdStyle">Name</td>
                <td>
                    <input type="text" name="Name" value="" id="txtEmpNo" />
                </td>
                </tr>
            
 
                
                 <tr>
                <td class="tdStyle">Organization</td>
                <td>
                    <input type="text" name="Organization" value=""/>
                </td>
                </tr>

 <tr>
                <td class="tdStyle">Role</td>
                <td>
                    <select name="Role">
        <option name = "Member">Member</option>
        <option name = "Admin">Admin</option>
      </select>
                </td>
                </tr>
    
    
</table>
<p> 
      <input id="submit" type="button" value="Submit" name="submit">
      <input type="button" name="cancel" value="Cancel" onClick="closebox()">
    </p>
</form>
        
<table id="details" style=" width:500px; border:thick; font-family:Verdana; font-size:medium; background-color:bisque;" border="1">
 <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Organization
                    </th>
                    <th>
                        Role
                    </th>
                    <th>
                        Delete
                    </th>
                    
                </tr>
            </thead>
            <tbody id="tblBody"></tbody>
        </table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>

CSS

.tdStyle {
            float: right;
        }

JavaScript

$(document).ready(function(){
    $('#details').on('click', '.remove', function() {
        $(this).closest('tr').remove();
    })
    
    $('#submit').on('click',function(){
        var st = '';
        $('#myForminput input[type=text],select').each(function(){
            st = st+ '<td>'+$(this).val()+'</td>';
            $(this).val('');
        });
        var remove = $('<td />', {text : 'X', 'class': 'remove'});
        $('#details').append( $('<tr />').append(st, remove) );
    });
});