JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<script src="bootstrap"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<table class="table table-condensed table-hover" id="table1">
										<thead>
											<tr>
                                                                                                <th class="center">Particulars</th>
												<th class="center">Amount</th>
												<th class="center">Vch No</th>
											</tr>
										</thead>

										<tbody>
											<tr>
												
                                                                                                <td class="center">
                                                                                                    
													<label>
                                                                                                            <span class="btn-danger btn-delete" title="Delete">X</span>
														<input type="text" name="particulars[]" class="input input-xlarge" required>
													</label>
												</td>

												<td class="center">
													<input type="text" pattern="[0-9]*" name="amount[]" class="input input-small amount" autocomplete="off" required>
												</td>
												<td class="center"><input type="text" name="vch_no[]" class="input input-small" required></td>
												
											</tr>

											<tr>
												<td class="center">
													<label>
                                                                                                            <span class="btn-danger btn-delete" title="Delete">X</span>
														<input type="text" name="particulars[]" class="input input-xlarge">
													</label>
												</td>

												<td class="center">
													<input type="text" pattern="[0-9]*" name="amount[]" class="input input-small amount"...

JavaScript

$(function(){
        $('.add-more').on('click',function(){//for new
            $(this).before('<tr><td class="center"><label><span class="btn-danger btn-delete" title="Delete">X</span><input type="text" name="particulars[]" class="input input-xlarge"></label></td><td class="center"><input type="text" pattern="[0-9]*" name="amount[]" class="input input-small amount amnt" autocomplete="off"></td><td class="center"><input type="text" name="vch_no[]" class="input input-small"></td></tr>');
        });

     $('#table1').on('click change keyup blur keypress focus mouseout',".amount",function(){
		var sum = 0;
		$('.amount').each(function(){
		    if ($(this).val()!="" && !isNaN($(this).val())) {
			sum = sum + parseFloat($(this).val());
			$('.total').val(sum);
		    }
		});
	    });
$('.submit-btn').on('click',function(){
            $(this).submit();
        });
        $('#table1').on('click','.btn-delete',function(){
            $(this).closest('tr').remove();
        });
    });