dynamically create table rows in javascript [duplicate]

I have multiple tables in my page, in which user will add new rows as per his need.

I have successfully created a function which takes the table id and then add new row to that specific table.

But i need to add the delete functionality as well.

This is my HTML Table

<table class="table table-responsive table-bordered order-list" id="educationTable">
    <thead>
        <tr>
            <th>Institute Name</th>
            <th>Qualification</th>
            <th>Admission Date</th>
            <th>Graduation Date</th>
            <th>Degree Scanned Image</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr id="educationTableBody">
            <td>
                <input type="text" class="form-control" name="txt[]" id="number" />
            </td>
            <td>
                <input type="number" class="form-control" name="txt[]" id="number" />
            </td>
            <td>
                <input type="email" class="form-control" name="txt[]" id="number" />
            </td>
            <td>
                <input type="password" class="form-control" name="txt[]" id="number" />
            </td>
            <td>
                <input type="text" class="form-control" name="txt[]" id="number" />
            </td>
            <td><i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
            </td>
        </tr>
    </tbody>
</table>

insTableRow function

function insTableRow(tableID) {
    var x=document.getElementById(tableID);
    var get_row = x.rows[1];
    var new_row = x.rows[1].cloneNode(true);
    $("#"+tableID+" tbody").append(new_row);
}

What I want now, that if users click on add new row icon , a new row should be added with eopty input values, and in previous row, add new row icon should be replaced with delete this row icon, and on delete row it should delete the row.

Any idea how can I achieve this ?

working JSFIDDLE