JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
<div id="wrap">
	<header>
	</header>
	<div class="test">
        <table class="table">
		    <thead>
			    <tr>
				    <th class="col-lg-1"> S.No </th>
			    	<th class="col-lg-4"> Item Name </th>
			    	<th class="col-lg-1"> Quantity </th>
				    <th class="col-lg-2"> Price </th>
				    <th class="col-lg-2"> Total </th>
				    <th class="col-lg-2"> Edit/Delete </th>
			    </tr>
		    </thead>
		    <tbody>
			    <form>
				    <tr>
				    	<td> 1. </td>
					    <td> </td>
					    <td> </td>
					    <td> </td>
					    <td> </td>
					    <td> <i class="glyphicon glyphicon-plus"> </i> <i class="glyphicon glyphicon-trash"> </i> </td>
				    </tr>
			    </form>
            </tbody>
	    </table>
    </div>
</div>
<footer>
	Total Amount:<span class="sum"> </span>
	Incoming Cash: <input type="text" placeholder="Cash"> <br>
	Refund: <span> </span>
    <input class="btn btn-default" type="submit" value="Submit" >
</footer>

CSS

html, body {
  height: 100%;
}
.test {
    height: calc(100% - 100px);
}
#wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -60px;
	padding: 0 0 60px;
}
header {
	width: 100%;
	height: 100px;
	background: #abcdef;
}
thead tr th {
	text-align: center;
}
tbody {
	overflow: auto;
}
tbody td select {
	width: 100%;
}
tbody td {
	text-align: center;
	font-weight: bold;
}
.sp {
	display: none;
}
footer {
	height: 60px;
	background-color: #f5f5f5;
}

JavaScript

$('table tbody tr').not(':first').hide();
$('.glyphicon-plus').click(function() {
		var
        $this = $(this),
        $row = $this.closest("tr"),
        $rowIndex = $row.index();
        console.log($rowIndex);
        $(this).removeClass("glyphicon glyphicon-plus");
        $(this).addClass("glyphicon glyphicon-ok");
		$row.next().show("medium").find("td").eq(0).html($rowIndex+1+".");
    });
	$('.glyphicon-trash').click(function() {
		var total = 0;
		$(this).closest('tr').hide();
		$('table tr:visible td:nth-of-type(5)').each(function(){
            total += parseFloat($(this).text()) || 0;
        })
        $('.sum').text(" " + total);
	});