Table Design with icons on Hover using jQuery, Html and CSS

design a simple table with displaying icons on Hover using CSS & jQuery.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form id="form_id">
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <label for="lastname">Username: </label>
    <input type="text" id="username" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    
    <input type="button" value="submit" id="submit-button" />
</form>

<table class="table zebra-style">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>Arvind</td>
            <td>P</td>
            <td><a href="http://twitter.com/arvind5588">@arvind5588</a>

            </td>
            <td class="table-action-hide"> 
 <a href="#" class="delete-row" style="opacity: 0;">
                    <i class="fa fa-trash-o"></i>
                </a>

            </td>
        </tr>
        <tr>
            <td>Facebook</td>
            <td>Inc</td>
            <td>@facebook</td>
            <td class="table-action-hide"> 
 <a href="#" class="delete-row" style="opacity: 0;">
                    <i class="fa fa-trash-o"></i>
                </a>

            </td>
        </tr>
        <tr class="odd">
            <td>Google</td>
            <td>Search</td>
            <td>@google</td>
            <td class="table-action-hide"> 
 <a href="#" class="delete-row" style="opacity: 0;">
                    <i class="fa fa-trash-o"></i>
                </a>

            </td>
        </tr>
    </tbody>
</table>

CSS

table.zebra-style {
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    text-align:left;
    border:1px solid #ccc;
    margin-bottom:25px;
    width:70%
}
table.zebra-style th {
    color: #443;
    font-size: 13px;
    font-weight: normal;
    padding: 10px 8px;
}
table.zebra-style td {
    color: #777;
    padding: 8px;
    font-size:13px;
}
table.zebra-style tr.odd {
    background:#f2f2f2;
}
.table-action {
    text-align: center;
}
.table-action-hide a {
    opacity: 0;
}
.table-action a, .table-action-hide a {
    display: inline-block;
    margin-right: 5px;
    color: #666;
}
.table-action a:hover, .table-action-hide a:hover {
    color: green;
}
.table-action a:last-child, .table-action-hide a:last-child {
    margin-right: 0;
}
table.zebra-style tr:hover { background-color:#00FF7F; }

JavaScript

var names = [],
    tbody = $("table.zebra-style tbody");


function getInfo(e) {
    var nameObj = {
        first: e.target.form[0].value,
        last: e.target.form[1].value,
        username: e.target.form[2].value
    };

		if(nameObj.first!==""&& nameObj.last!==""&&nameObj.username!=="") {
    names.push(nameObj);

    e.target.form[0].value = "";
    e.target.form[1].value = "";
    e.target.form[2].value = "";
    

    names.forEach(function (name) {
    
        var tr = $("<tr>");

        tr.append($("<td>").text(name.first));
        tr.append($("<td>").text(name.last));
				tr.append($("<td>").text(name.username));
        var cell = "<td class=\"table-action-hide\"><a href=\"#\" class=\"delete-row\" style=\"opacity: 1\"><i class=\"fa fa-trash-o\"></i></a></td>";

				tr.append(cell);
        //div=tr.append($("<td>").addClass("table-action-hide"));
        //div.innerHTML=cell;
        tbody.append(tr);
    });
    }
}

jQuery(document).ready(function () {
    // Delete row in a table
    jQuery('.delete-row').click(function () {
        var c = confirm("Continue delete?");
    		
        
        if (c) jQuery(this).closest('tr').fadeOut(function () {
            jQuery(this).remove();
        });
        return false;
    });

    // Show aciton upon row hover
    jQuery('.table tbody tr').hover(function () {
        jQuery(this).find('.table-action-hide a').animate({
            opacity: 1
        });
    }, function () {
        jQuery(this).find('.table-action-hide a').animate({
            opacity: 0
        });
    });
});

$("#submit-button").on("click", getInfo);