I have below code and i want when user changes Quantity row total & grand Total should also change. Quantity should not be -ve

2. <div class="container">
3.     <div class="row">
4.         <div class="col-sm-12 col-md-10 col-md-offset-1">
5.             <table class="table table-hover">
6.                 <thead>
7.                     <tr>
8.                         <th>Product</th>
9.                         <th>Quantity</th>
10.                         <th class="text-center">Price</th>
11.                         <th class="text-center">Total</th>
12.                         <th> </th>
13.                     </tr>
14.                 </thead>
15.                 <tbody>
16.                     <tr>
17.                         <td class="col-sm-8 col-md-6">
18.                         <div class="media">
19.                             <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
20.                             <div class="media-body">
21.                                 <h4 class="media-heading"><a href="#">Product name</a></h4>
22.                                 <h5 class="media-heading"> by <a href="#">Brand name</a></h5>
23.                                 <span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
24.                             </div>
25.                         </div></td>
26.                         <td class="col-sm-1 col-md-1" style="text-align: center">
27.                         <input type="email" class="form-control" id="exampleInputEmail1" value="3">
28.                         </td>
29.                         <td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td>
30.                         <td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
31.                         <td class="col-sm-1 col-md-1">
32.                         <button type="button" class="btn btn-danger">
33.                             <span class="glyphicon glyphicon-remove"></span> Remove
34.                         </button></td>
35.                     </tr>
36.                     <tr>
37.                         <td class="col-md-6">
38.                         <div class="media">
39.                             <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
40.                             <div class="media-body">
41.                                 <h4 class="media-heading"><a href="#">Product name</a></h4>
42.                                 <h5 class="media-heading"> by <a href="#">Brand name</a></h5>
43.                                 <span>Status: </span><span class="text-warning"><strong>Leaves warehouse in 2 - 3 weeks</strong></span>
44.                             </div>
45.                         </div></td>
46.                         <td class="col-md-1" style="text-align: center">
47.                         <input type="email" class="form-control" id="exampleInputEmail1" value="2">
48.                         </td>
49.                         <td class="col-md-1 text-center"><strong>$4.99</strong></td>
50.                         <td class="col-md-1 text-center"><strong>$9.98</strong></td>
51.                         <td class="col-md-1">
52.                         <button type="button" class="btn btn-danger">
53.                             <span class="glyphicon glyphicon-remove"></span> Remove
54.                         </button></td>
55.                     </tr>
56.                    
57.                     
58.                     <tr>
59.                         <td>   </td>
60.                         <td>   </td>
61.                         <td>   </td>
62.                         <td><h3>Total</h3></td>
63.                         <td class="text-right"><h3><strong>$31.53</strong></h3></td>
64.                     </tr>
65.                     <tr>
66.                          <td>   </td>
67.                         <td>
68.                         <button type="button" class="btn btn-default">
69.                             <span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
70.                         </button></td>
71.                         <td>
72.                         <button type="button" class="btn btn-success">
73.                             Checkout <span class="glyphicon glyphicon-play"></span>
74.                         </button></td>
75.                     </tr>
76.                 </tbody>
77.             </table>
78.         </div>
79.     </div>
80. </div>

Thanks