We Keep Coding

Select elements within target div (row) on event jQuery

I have a table from which I need to select all of the values of the row after an event done in the same row (in this case is a keyup event) with jQuery. The table could have many rows but the selection has to be on the items of the row event.
This is the HTML of the table:
<table class="table" id="form-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Discount</th>
<th scope="col">Amount</th>
<th scope="col">Hidden</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<th scope="row">1</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" id="companySelect">
{% for product in product_options %}
<option>{{ product }}</option>
{% endfor %}
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control" id="qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control" id="price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" id="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
</tbody>
</table>
And looks like this on the site:
For more context: I am making a quote app in which I'll type the price and quantity of each item in each row and I need to update the "amount" column after each keyup. So I need to know how to select the proper "qty", "price", "discount" and "amount" id's of the row typed to do that.

Firstly, The id attribute is unique, So you should replace it with class like this
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
Secondly, You can get the tr by using .closest() like this $(this).closest("tr")
Finally, You can calculate individual row by creating another method named updateAmount_per_row like below:
function updateAmount_per_row(tr){
var qTy = getValue_by_className(tr, '.qty-column .qty');
var price = getValue_by_className(tr, '.price-column .price');
var amount = qTy * price;
tr.find('.amount-column').html(amount);
}
$(".qty-column, .price-column").on("keyup", function(){
var tr = $(this).closest("tr");
updateAmount_per_row(tr);
});
function updateAmount_per_row(tr){
var qTy = getValue_by_className(tr, '.qty-column .qty');
var price = getValue_by_className(tr, '.price-column .price');
var amount = qTy * price;
tr.find('.amount-column').html(amount);
}
function getValue_by_className(tr, className){
var value = parseInt(tr.find(className).val(), 10);
return value >= 0 ? value : 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="form-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Discount</th>
<th scope="col">Amount</th>
<th scope="col">Hidden</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<th scope="row">1</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" class="companySelect">
<option>Product A</option>
<option>Product B</option>
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" class="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
<tr id="row-2">
<th scope="row">2</th>
<td class="description-column">
<div class="form-group">
<select class="form-control" class="companySelect">
<option>Product A</option>
<option>Product B</option>
</select>
</div>
</td>
<td class="qty-column">
<div class="form-group">
<input type="number" class="form-control qty" placeholder="Qty" min="0" step="1">
</div>
</td>
<td class="price-column">
<div class="form-group">
<input type="number" class="form-control price" min="0.01" placeholder="Price">
</div>
</td>
<td class="discount-column">
<div class="form-group">
<input type="number" class="form-control" class="discount" placeholder="0" min="0.01" max="99.99">
</div>
<div>%</div>
</td>
<td class="amount-column"></td>
<td class="hidden-column">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="hiddenCheck">
</div>
</td>
</tr>
</tbody>
</table>

Using Mai Phuong answer as testing I managed to make it work by using the target property instead of this, because this for some reason was referencing the whole document (#document).
Here is the keyup event listener:
$('.price, .qty, .discount').keyup((event) => {
let tr = event.target.closest('tr');
updateAmount(tr);
});
and here's the final updateAmount function:
function updateAmount(tr) {
let qty = $(tr).find('.qty').val();
let price = $(tr).find('.price').val();
let discount = $(tr).find('.discount').val();
let amount = (qty * price * (100 - discount)) / 100;
$(tr).find('.amount').html(amount);
}

sum the values of input fields on keyup [duplicate]

This question already has answers here:
How to add two strings as if they were numbers? [duplicate]
(20 answers)
Closed 3 years ago.
I want to add all input fields values. Some of the fields are constant and some too you have to click on a button to add them and calculate the values.
The add button when clicked adds the input fields correctly but the calculation of all the values is the problem.
$(document).on("keyup", ".price", function() {
var closestParent = $(this).closest('tr');
var total = closestParent.find(".price").val();
var tuition = document.getElementById("tuition").value;
var pta = document.getElementById("pta").value;
var transport = document.getElementById("transport").value;
var totals = parseInt(total);
var t = 0;
$('.price').each(function(i, e) {
var amt = $(this).val() - 0;
var z = t += amt;
var totalz = z + tuition + transport + pta;
document.getElementById("tot").value = tuition;
console.log(t);
console.log(tuition)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td style="width: 60%;">
<h5>Tuition Fees </h5>
</td>
<td>
<input class="form-control" id="tuition" name="tuition_fees" type="text" placeholder="Enter Tuition Fees..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>PTA Dues </h5>
</td>
<td>
<input class="form-control" id="pta" name="PTA_dues" type="text" placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>Transport Fares </h5>
</td>
<td>
<input class="form-control" id="transport" name="transport_fares" type="text" placeholder="Enter Transport Fare..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td colspan="2">
<h5>Additional Fees </h5>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover table-striped" id="invoiceItem">
<tbody>
<tr>
<td style="width: 60%;">
<div class="row">
<div class="col-md-1"><input class="itemRow" type="checkbox"></div>
<div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control price" autocomplete="off"></div>
</div>
</td>
<td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control" autocomplete="off"></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
<button class="btn btn-success" id="addRows" type="button">+ Add item</button>
</div>
</div>
<br/>
<table class="table table-bordered">
<tr>
<td style="width:60%;">
<h5>TOTAL FEES </h5>
</td>
<td><input class="form-control" id="tot" name="total_fees" type="text" placeholder="total fees" value="" style="border:none;" /></td>
</tr>
</table>
What I want to do is get the total summation of the values in the total fees input field

parse your textbox values using parseInt. then you are redefining t everytime so I edited it. then move your class name price from enter fee name to enter amount textbox.
$(document).on("keyup",".price",function(){
var closestParent = $(this).closest('tr');
var total = parseInt(closestParent.find(".price").val());
var tuition = parseInt(document.getElementById("tuition").value);
var pta = parseInt(document.getElementById("pta").value);
var transport = document.getElementById("transport").value;
var totals = parseInt(total);
var t = 0;
$('.price').each(function(i,e){
var amt =$(this).val()-0;
t += amt;
var z = t;
var totalz = z + tuition + transport + pta;
document.getElementById("tot").value=tuition;
console.log(t);
console.log(tuition)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody>
<tr>
<td style="width: 60%;">
<h5>Tuition Fees </h5>
</td>
<td>
<input class="form-control" id="tuition" name="tuition_fees" type="text"
placeholder="Enter Tuition Fees..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>PTA Dues </h5>
</td>
<td>
<input class="form-control" id="pta" name="PTA_dues" type="text"
placeholder="Enter PTA Dues Amount..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td style="width: 60%;">
<h5>Transport Fares </h5>
</td>
<td>
<input class="form-control" id="transport" name="transport_fares" type="text"
placeholder="Enter Transport Fare..." value="" style="border:none;" />
</td>
</tr>
<tr>
<td colspan="2" >
<h5>Additional Fees </h5>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover table-striped" id="invoiceItem">
<tbody>
<tr>
<td style="width: 60%;"><div class="row">
<div class="col-md-1"><input class="itemRow" type="checkbox"></div>
<div class="col-md-10"><input type="text" style="border:none;" name="productCode[]" placeholder="Enter Fees Name" id="productCode_1" class="form-control" autocomplete="off"></div></div></td>
<td><input type="text" name="productName[]" style="border:none;" placeholder="Enter Amount" id="price_" class="form-control price" autocomplete="off"></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-danger delete" id="removeRows" type="button">- Delete item</button>
<button class="btn btn-success" id="addRows" type="button">+ Add item</button>
</div>
</div>
<br/>
<table class="table table-bordered">
<tr>
<td style="width:60%;" >
<h5>TOTAL FEES </h5>
</td>
<td><input class="form-control" id="tot" name="total_fees" type="text"
placeholder="total fees" value="" style="border:none;" /></td>
</tr>
</table>

Get values of all the input in a table

I am stuck with this problem. I wanted to get all the values of all the input of the table but I am having a having a hard time getting all values. The number of rows in the table are dynamic.
<table id="receiptTable" class="table table-bordered">
<thead>
<th class="hidden">
<label>Order Item ID</label>
</th>
<th class="col-md-3">
<label>Item</label>
</th>
<th class="col-md-2">
<label>UOM</label>
</th>
<th class="col-md-2">
<label>Qty</label>
</th>
</thead>
<tbody>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="qwe123">
</td>
<td class="col-md-3">
<p>
Product 1
</p>
</td>
<td class="col-md-2" hidden>
<p>
UNIT
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="0" required>
</td>
</tr>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="abc123">
</td>
<td class="col-md-3">
<p>
Product 2
</p>
</td>
<td class="col-md-2" hidden>
<p>
PCS
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="99" value="3" required>
</td>
</tr>
</tbody>
I need to get the values of '.orderItemIDValue' and '.qtyFulfilled' and store them in a object array.

Iterate trs inside the table using map
var inputVals = $("#receiptTable tbody tr").map( (i,v) => ({
orderItemId : $(v).find(".orderItemID .orderItemIDValue").val(),
qty: $(v).find(".orderItemID .qtyFulfill").val()
})//end of inner function
).toArray(); //end of map

I'd select all the table's rows, loop them and return an object holding the className as key and its value
let values = [...document.getElementById('receiptTable').getElementsByTagName('tr')].map(row => {
let orderItemIdValue = row.getElementsByClassName('orderItemIDValue')[0].value;
let qtyFulfill = row.getElementsByClassName('qtyFulfill')[0].value;
return {
orderItemIdValue,
qtyFulfill
};
});

you could use jQuery like this:
<script>
jQuery(document).ready(function($)
{
var inputValues = [];
$('input').each(function(i, v)
{
inputValues.push($(this).val())
})
})
</script>
this loops through all the inputs and adds the value to an array called inputValues

Use qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get() It will return all the relevant fiels.
$("button").click(function() {
var orderItemIDValue = [];
var qtyFulfill = [];
orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()
console.log(orderItemIDValue)
console.log(qtyFulfill)
})
Demo
$("button").click(function() {
var orderItemIDValue = [];
var qtyFulfill = [];
orderItemIDValue = $("input.orderItemIDValue").map(function(){return $(this).val()}).get()
qtyFulfill = $("input.qtyFulfill").map(function(){return $(this).val()}).get()
console.log(orderItemIDValue)
console.log(qtyFulfill)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="receiptTable" class="table table-bordered">
<thead>
<th class="hidden">
<label>Order Item ID</label>
</th>
<th class="col-md-3">
<label>Item</label>
</th>
<th class="col-md-2">
<label>UOM</label>
</th>
<th class="col-md-2">
<label>Qty</label>
</th>
</thead>
<tbody>
<tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="something">
</td>
<td class="col-md-3">
<p>
</p>
</td>
<td class="col-md-2" hidden>
<p>
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="0" required>
</td>
</tr> <tr>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="123">
</td>
<td class="col-md-3">
<p>
</p>
</td>
<td class="col-md-2" hidden>
<p>
</p>
</td>
<td class="col-md-2">
<input type="number" class="form-control input qtyFulfill" name="qtyFulfilled" placeholder="Quantity" min="0" max="10" value="3" required>
</td>
</tr>
</tbody>
</table>
<button>getdata</button>

You can try this Js code:
function getInputValues(){
var orderItemIDValueInputs = document.querySelectorAll('.orderItemIDValue');
var qtyFulfilledInputs = document.querySelectorAll('.qtyFulfilled');
var store = [];
orderItemIDValueInputs.forEach(function(input){
var value = input.value;
store.push(value);
});
qtyFulfilledInputs.forEach(function(input){
var value = input.value;
store.push(value);
});
return store;
}

Checkout This Demo.
$(document).ready(function(){
$('.tableExample tr').not(':first').each(function() {
var val = $(this).find(".orderItemIDValue").val();
alert(val);
});
})
.tableExample {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.tableExample thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.tableExample tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableExample">
<thead>
<tr>
<th>Name</th>
<th>Input</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
<p>Test 1</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="1">
</td>
</tr>
<tr>
<td class="col-md-3">
<p>Test 2</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="2">
</td>
</tr>
<tr>
<td class="col-md-3">
<p>Test 3</p>
</td>
<td class="hidden orderItemID">
<input class="hidden orderItemIDValue" name="orderItemIDValue" value="3">
</td>
</tr>
</tbody>
</table>

Total table column with jquery function

I have found on this site a jquery function for updating a table row. Now I need the total for the column. Anybody? I,m not familiar with jquery and tried a lot of things but don't get it working.
Fiddle: http://jsfiddle.net/heliosh/r7dvay4o/
JS
$(document).ready(function () {
function updateArticle1() {
var Persons = parseFloat($("#dare_price1").val());
var total = (Persons) * 2.00;
var total = total.toFixed(2);
$("#total_price_amount1").val(total);
}
$(document).on("change, keyup", "#dare_price1", updateArticle1);
});
$(document).ready(function () {
function updateArticle2() {
var Animals = parseFloat($("#dare_price2").val());
var total = (Animals) * 3.50;
var total = total.toFixed(2);
$("#total_price_amount2").val(total);
}
$(document).on("change, keyup", "#dare_price2", updateArticle2);
});
$(document).ready(function () {
function updateArticle3() {
var Bedlinen = parseFloat($("#dare_price3").val());
var total = (Bedlinen) * 8.50;
var total = total.toFixed(2);
$("#total_price_amount3").val(total);
}
$(document).on("change, keyup", "#dare_price3", updateArticle3);
});
$(document).ready(function () {
function updateArticle4() {
var Towels = parseFloat($("#dare_price4").val());
var total = (Towels) * 7.50;
var total = total.toFixed(2);
$("#total_price_amount4").val(total);
}
$(document).on("change, keyup", "#dare_price4", updateArticle4);
});
HTML
<table>
<tr>
<td>Persons?</td>
<td>
<input class="span4 input-big" id="dare_price1" name="Persons" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Animals?</td>
<td>
<input class="span4 input-big" id="dare_price2" name="Animals" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Bedlinen?</td>
<td>
<input class="span4 input-big" id="dare_price3" name="Bedlinen" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Towels?</td>
<td>
<input class="span4 input-big" id="dare_price4" name="Towels" value="" size="30" type="text" />
</td>
</tr>
</table>
<table style="width: 50%">
<tr>
<td style="width: 403px"></td>
<td></td>
</tr>
<tr>
<td style="width: 403px">Rentalprice</td>
<td>189.00</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px">Taxes</td>
<td style="width: 50px">
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="PricePersons" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Animals</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="PriceAnimals" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Bedlinen</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="PriceBedlinen" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Towels</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="PriceTowels" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px">Total</td>
<td> </td>
<td>Euro</td>
</tr>
</table>

Here is you updated fiddle.
I calculates the grand total of all the items.
Here is the snippet.
$(document).ready(function() {
function updateArticle1() {
var Persons = parseFloat($("#dare_price1").val());
var total = (Persons) * 2.00;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$("#total_price_amount1").val(total);
}
function updateArticle2() {
var Animals = parseFloat($("#dare_price2").val());
var total = (Animals) * 3.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$("#total_price_amount2").val(total);
}
function updateArticle3() {
var Bedlinen = parseFloat($("#dare_price3").val());
var total = (Bedlinen) * 8.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$("#total_price_amount3").val(total);
}
function updateArticle4() {
var Towels = parseFloat($("#dare_price4").val());
var total = (Towels) * 7.50;
var total = total.toFixed(2);
if (isNaN(total)) total = 0;
$("#total_price_amount4").val(total);
}
function updateTotal() {
var price1 = parseFloat($("#total_price_amount1").val());
var price2 = parseFloat($("#total_price_amount2").val());
var price3 = parseFloat($("#total_price_amount3").val());
var price4 = parseFloat($("#total_price_amount4").val());
var total = price1 + price2 + price3 + price4;
if (isNaN(total)) total = 0;
$("#totalSum").text(total);
}
$(document).on("change, keyup", "#dare_price1", updateArticle1);
$(document).on("change, keyup", "#dare_price2", updateArticle2);
$(document).on("change, keyup", "#dare_price3", updateArticle3);
$(document).on("change, keyup", "#dare_price4", updateArticle4);
$(document).on("click", "#getTotal", updateTotal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
<tr>
<td>Persons?</td>
<td>
<input class="span4 input-big" id="dare_price1" name="Persons" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Animals?</td>
<td>
<input class="span4 input-big" id="dare_price2" name="Animals" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Bedlinen?</td>
<td>
<input class="span4 input-big" id="dare_price3" name="Bedlinen" value="" size="30" type="text" />
</td>
</tr>
<tr>
<td>Towels?</td>
<td>
<input class="span4 input-big" id="dare_price4" name="Towels" value="" size="30" type="text" />
</td>
</tr>
</table>
<table style="width: 50%">
<tr>
<td style="width: 403px"></td>
<td></td>
</tr>
<tr>
<td style="width: 403px">Rentalprice</td>
<td>189.00</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px">Taxes</td>
<td style="width: 50px">
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="PricePersons" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Animals</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="PriceAnimals" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Bedlinen</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="PriceBedlinen" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px"><span lang="nl">Towels</span>
</td>
<td>
<input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="PriceTowels" value="" />
</td>
<td>Euro</td>
</tr>
<tr>
<td style="width: 403px">Total</td>
<td id="totalSum"> </td>
<td>Euro</td>
</tr>
</table>
<input id="getTotal" type="button" value="Get Total" />
This code can be further optimized by replacing the 4 functions replaceArticle1(), replaceArticle2(), replaceArticle3(), replaceArticle4() with just a single function replaceArticle() and updating the respective elements using their ids.

There is your updated fiddle
You need to add an id to your Rentalprice value to use it in your script:
<td style="width: 403px">Rentalprice</td>
<td><span id="rental_price">189.00</span></td>
In handlers for each input field you should call updateTotal() function in the end.
If value of input is not a number, just set '' as a value.

How to generate the rows automatically based on input values?

<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
This is input text box code in view page......
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
This is my table code.... in view page
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
This is javascript for automatic cell creation.
My problem is how to create a automatic rows by giving input into input fields.
And the sno is automatically generate(i.e 1,2... based on the input values).
please help to solve this issue.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<label class="col-lg-1 control-label" id="pd">Mode:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="number" id="follow_Date" placeholder="Mode" name="TMode" class="form-control input-xs Mode">
</div>
</div>
</div>
<label class="col-lg-1 control-label" id="pd">Due Start:</label>
<div class="col-lg-3">
<div class="row">
<div class="col-lg-4">
<input type="text" class="form-control input-xs datepicker-dates Dues" placeholder="Due Start Date…" id="txtDate" name="TDDate" value="">
</div>
</div>
</div>
</div>
<div class="container">
<table class='table table-hover table-bordered table-striped table-xxs' id="cartGrid">
<thead>
<tr>
<th></th>
<th>Sno</th>
<th >Date</th>
<th >Amount</th>
<th >Bank Name</th>
<th >Chqamt</th>
<th >Payable</th>
<th>Bank1</th>
<th >Chqamt1</th>
<th >Payable1</th>
</tr>
</thead>
<tbody id="appendRows">
<tr>
<td><a href='javascript:void(0);' class='remove1'><span class='glyphicon glyphicon-remove'></span></a></td>
<td ><input style="width:50px" type="text" class="form-control" name="Sno[]" id="Sno" value="1"></td>
<td><input style="width:50px" type="text" class="form-control" name="Date[]" id="Date"></td>
<td> <input style="width:90px" type="text" class="form-control" name="Amount[]" id="Amount"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bankname[]" id="Bankname"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt[]" id="Chqamt"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable[]" id="Payable"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Bank1[]" id="Bank1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Chqamt1[]" id="Chqamt1"></td>
<td ><input style="width:80px" type="text" class="form-control" name="Payable1[]" id="Payable1"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript">
$('#cartGrid').on('keydown','input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#cartGrid')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
var cloned = $lastTr.clone();
cloned.find('input').val('');
$lastTr.after(cloned);
}
});
</script>
<script>
$(document).on('click', '.remove1', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
</script>
<script type="text/javascript">
$(function(){
$("body").on("focusout",".Mode",function(){
var trLength=$('body #appendRows tr').length;
for (var i = 1; i <trLength; i++) {
$('#appendRows tr:nth-child(2)').remove();
}
var val = $(this).val();
var i=0;
for(i==0;i<val;i++){
var html = $("#appendRows tr:first-child").clone();
html.find("input").val("");
html.find('input[name^="Sno"]').val(i+2);
$('#appendRows').append(html);
}
});
})
</script>