JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table">
    <thead>
        <tr>
            <th> S.no </th>
            <th> Item Name </th>
			<th> Quantity </th>
			<th> Price </th>
			<th> Total </th>
			<th> Edit/Delete</th>
		</tr>
	</thead>
	<tbody>
        <tr>
            <td> </td>
            <td> <select> </select> </td>
            <td> <input type="text" size="2"/> </td>
            <td> 5.50 </td>
            <td> </td>
            <td> <i class="add">add </i> <i class="delete">del </i></td>
    	</tr>
        <tr>
            <td> </td>
            <td> <select> </select> </td>
            <td> <input type="text" size="2"/> </td>
            <td> 5.50 </td>
            <td> </td>
            <td> <i class="add">add </i> <i class="delete">del </i></td>
        </tr>
        <tr>
            <td> </td>
            <td> <select> </select> </td>
            <td> <input type="text" size="2"/> </td>
            <td> 5.50 </td>
            <td> </td>
            <td> <i class="add">add </i> <i class="delete">del </i></td>
        </tr>
        <tr>
            <td> </td>
            <td> <select> </select> </td>
            <td> <input type="text" size="2"/> </td>
            <td> 5.50 </td>
            <td> </td>
            <td> <i class="add">add </i> <i class="delete">del </i></td>
        </tr>
        <tr>
            <td> </td>
            <td> <select> </select> </td>
            <td> <input type="text" size="2"/> </td>
            <td> 5.50 </td>
            <td> </td>
            <td> <i class="add">add </i> <i class="delete">del </i></td>
        </tr>
        <tr>
            <td> </td>
            <td> <select> </select> </td>
            <td> <input type="text" size="2"/> </td>
            <td> 5.50 </td>
            <td> </td>
            <td> <i class="add">add </i> <i class="delete">del </i></td>
        </tr>
    </tbody>
</table>
<footer>
</footer>

CSS

html, body {
    margin: 0;
    padding: 0;
}
th, td {
    padding: 10px;
}
footer {
    position: fixed;
    bottom: 0;
    height: 20px;
    width: 100%;
    background: #abcdef;
}

JavaScript

$( document ).ready(function() {
    $('table tbody tr').not(':first').hide();
	$(".add").click(function() {
		var
        $this = $(this),
        $row = $this.closest("tr"),
        $rowIndex = $row.index();
		$row.next().show("medium").find("td").eq(0).html($rowIndex+2);
    });
	$(".delete").click(function() {
		$(this).closest('tr').hide();
	});
});