Develop Reference

My function validation does not work on added row

I have a function where my input type="number" data-id="weight" checks whether the user typed a divisible by 5 or not. It is perfectly working on my current row but when i add a new row/s, it is not working. Is there anything i missed? I provided my snippet below. Thank you everyone.
To try it. Please type on the weight column a number that is not divisible by 5, then you'll see the error. Add row and do the same, you will not see the error. My target is my function to work with added rows too.
$("#addrow").on('click', function() {
let rowIndex = $('.auto_num').length + 1;
let rowIndexx = $('.auto_num').length + 1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
'<td><input name="lightBand' + rowIndex + '" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight' + rowIndex + '" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand' + rowIndex + '" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
// divisible by only 5
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', () => {
if (input.value % 5 !== 0) {
alert('not valid');
input.value = 5;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto" />
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

This is caused by the event handler for the change event not being fired for dynamically created objects.
When you create an the event handlers like this:
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', () => {
...
}
});
The handler is only mapped for elements that exist when you first run the code. That means any subsequently created dynamic elements will not cause the event to fire.
Instead, use the following syntax to create the event which will catch dynamically created elements by using their selector (input[data-id="weight"]):
$(document).on('change', 'input[data-id="weight"]', function(e) {
if ($(this).val() % 5 !== 0) {
alert('not valid');
$(this).val(5);
}
});
I've removed the other code you had previously that tried to bind the event handler. You don't need to do it that way with jQuery.
Seen here in a working version of your snippet:
$("#addrow").on('click', function(){
let rowIndex = $('.auto_num').length+1;
let rowIndexx = $('.auto_num').length+1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="'+rowIndexx+'" /></td>"' +
'<td><input name="lightBand'+rowIndex+'" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
});
// divisible by only 5
$(document).on('change', 'input[data-id="weight"]', function(e) {
if ($(this).val() % 5 !== 0) {
alert('not valid');
$(this).val(5);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto"/>
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

Add change event listener after adding the table row. Modified the above code as below:
$("#addrow").on('click', function(){
let rowIndex = $('.auto_num').length+1;
let rowIndexx = $('.auto_num').length+1;
var newRow = '<tr><td><input class="auto_num" type="text" name="entryCount" value="'+rowIndexx+'" /></td>"' +
'<td><input name="lightBand'+rowIndex+'" id="auto" value="" class="form" type="number" /></td>"' +
'<td><input data-id="weight" name="weight'+rowIndex+'" type="number" placeholder="not working divisible by 5" /></td>"' +
'<td><input id="wingBand" name="wingBand'+rowIndex+'" type="number" /></td>"' +
'<td><input type="button" class="removerow" id="removerow'+rowIndex+'" name="removerow'+rowIndex+'" value="Remove"/></td>';
$("#applicanttable > tbody > tr:last").after(newRow);
const list = document.querySelectorAll('input[data-id="weight"]');
const input = list[list.length - 1];
console.log(input)
input.addEventListener('change', inputValidation);
});
const inputValidation = (e) => {
if (e.target.value % 5 !== 0) {
alert('not valid');
e.target.value = 5;
}
}
// divisible by only 5
const inputer = document.querySelectorAll('input[data-id="weight"]');
inputer.forEach(input => {
input.addEventListener('change', inputValidation);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<div class="row">
<tr>
<th>#</th>
<th>LB#</th>
<th>Weight#</th>
<th>Wingband #</th>
<th>Action</th>
</tr>
<tr id="row_0">
<td>
<input id="#" name="#" class="auto_num" type="text" value="1" readonly />
</td>
<td class="labelcell">
<input value="" class="hehe form-control" placeholder="" required id="auto"/>
</td>
<td class="labelcell">
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
<input data-id="weight" name="weight1" type="number" placeholder="Working divisible by 5" />
</td>
<td class="labelcell">
<input name="wingBand" class="hehe form-control" type="number" />
</td>
<td class="labelcell">
<input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove" >
</td>
</tr>
</div>
</tbody>
</div>
<tfoot>
<tr>
</tr>
<tr>
<button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
</tr>
</tfoot>
</table>

Get the closest td of particular td in a table

I am looking to add the table rows dynamically ,such that id of every element of row should be one more than the ids of tds of previous row.,like if previous row has tds with ids a7,b7,c7 next row will have tds with a8,b8,c8 and so on
var rowCount=0;
function createit(){
rowCount++;
var tds=$("#addrowtd").closest('tr').children().each((a)=>{
//how to get the ids of tds here
console.log(a);
});// this outputs addrowtd ,how to get a2 ,b2 and c2 of this row
//console.log(tds)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a3"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b3"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c3"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove();//removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control"/>
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control"/>
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block" >Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>

I modified you code in one line to get the last tr from the table and get its id, then increment it .
var tds = $('#myTable').children()[1].lastElementChild.firstElementChild.getAttribute('id'); this is what I did. may be helpful. please take a look at the snippet. to see the id change please use developer tool.
var rowCount = 0;
function createit() {
rowCount++;
var tds = $('#myTable').children()[1].lastElementChild.firstElementChild.getAttribute('id');
//debugger;
tds = +tds.match(/\d/g).join('')+1;
console.log(`new id number ${tds}`)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a'+tds+'"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b'+tds+'"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c'+tds+'"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove(); //removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control" />
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block">Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>

I hope this helps ,I have printed all the ids of td in the row except the last one
var rowCount=0;
function createit(){
rowCount++;
let tdarray=[];
var tds=$("#addrowtd").closest('tr').children().not(':last').each((column, td)=>{
tdarray.push($(td).attr('id'));
//how to get the ids of tds here
console.log($(td).attr('id'));
});// this outputs addrowtd ,how to get a2 ,b2 and c2 of this row
//console.log(tds)
var newRow = $("<tr>");
var cols = "";
//I want to increment the each id and then add to the respective field like below
cols += '<td id="a3"><input type="text" class="form-control" name="name' + rowCount + '"/></td>';
cols += '<td id="b3"><input type="text" class="form-control" name="mail' + rowCount + '"/></td>';
cols += '<td id="c3"><input type="text" class="form-control" name="phone' + rowCount + '"/></td>';
cols += '<td id="addrowtd" colspan="5" style="text-align: left;"><button type="button" class="btn btn-lg btn-block " onclick="createit()" id="addrow" >Add Row</button></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#addrowtd").remove();//removig the previous one
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4" id="a2">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4" id="b2">
<input type="mail" name="mail" class="form-control"/>
</td>
<td class="col-sm-3" id="c2">
<input type="text" name="phone" class="form-control"/>
</td>
<td id="addrowtd" colspan="5" style="text-align: left;">
<button type="button" onclick="createit()" class="btn btn-lg btn-block" >Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>

Add , Update , delete and display data in table with jQuery [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Add Data Dynamically in the table and Edit then checkbox value is not updating this is problem.
Here in jsFiddle
Code Here in JSFiddle

Please review working snippet.
var cnt = 0;
var count = 1;
function BindData(count) {
$("#s_name").val($("#name_" + count).html());
$("#product_names").val($("#pro_" + count).html());
$("#emailid").val($("#email_" + count).html());
$("#mobileno").val($("#mobi_" + count).html());
$('input[name="are"]:checked').val($("#ur_" + count).html());
$("#price").val($("#pric_" + count).html());
$("#t_pro").val($("#totalPro_" + count).html());
$("#total_price").val($("#totalPri_" + count).html());
var checkedHTML = $("#productWith_" + count).html();
var arrCheckedValues = checkedHTML.split(",");
$('.ads_Checkbox').each(function() {
var values = $(this).val();
if (arrCheckedValues.indexOf(values) > -1) {
$(this).prop("checked", true);
}
});
$("#order").attr("value", "Update Order");
$("#order").attr("onclick", "EditData(" + count + ")");
}
function EditData(count) {
$("#name_" + count).html($("#s_name").val());
$("#pro_" + count).html($("#product_names").val());
$("#email_" + count).html($("#emailid").val());
$("#mobi_" + count).html($("#mobileno").val());
$("#ur_" + count).html($('input[name="are"]:checked').val());
$("#pric_" + count).html($("#price").val());
$("#totalPro_" + count).html($("#t_pro").val());
$("#totalPri_" + count).html($("#total_price").val());
var chk = '';
var arrCheckedValues = [];
$('.ads_Checkbox:checked').each(function() {
var values = $(this).val();
arrCheckedValues.push(values);
});
chk = arrCheckedValues.join(",");
$("#productWith_" + count).html(chk);
$("#order").attr("value", "Order");
$("#order").attr("onclick", "AddData()");
//AddData(); /// ADD NEW DATA
$("#s_name").val("");
//$("#product_names").val("");
$("#emailid").val("");
$("#mobileno").val("");
//$('input[name="are"]').prop("");
$("#price").val("");
$("#t_pro").val("");
$("#total_price").val("");
// Clear all CheckBoxes
$('input[type=checkbox]').each(function() {
this.checked = false;
});
}
function AddData() {
var shop_name = $("#s_name").val();
var pro_name = $("#product_names").val();
var email = $("#emailid").val();
var mobi = $("#mobileno").val();
var ur = $('input[name="are"]:checked').val();
var pric = $("#price").val();
var total_pro = $("#t_pro").val();
var total_pri = $("#total_price").val();
var chk = '';
var arrCheckedValues = [];
$('.ads_Checkbox:checked').each(function() {
var values = $(this).val();
arrCheckedValues.push(values);
//chk += values;
});
chk = arrCheckedValues.join(",");
$("#mytab").append('<tr><td id="name_' + count + '">' + shop_name + '</td><td id="pro_' + count + '">' + pro_name +
'</td><td id="email_' + count + '">' + email + '</td><td id="mobi_' + count + '">' + mobi +
'</td><td id="ur_' + count + '">' + ur + '</td><td id="pric_' + count + '">' + pric + '</td><td id="totalPro_' + count + '">' + total_pro + '</td><td id="totalPri_' + count + '">' + total_pri + '</td><td id="productWith_' + count + '">' + chk + '</td><td><button type="button" class="delete">Delete</button></td><td><button type="button" id="edit" onclick="BindData(' + count + ');" >Edit</button></td></tr>');
cnt++;
count++;
$("#s_name").val("");
//$("#product_names").val("");
$("#emailid").val("");
$("#mobileno").val("");
//$('input[name="are"]').val("");
$("#price").val("");
$("#t_pro").val("");
$("#total_price").val("");
// Clear all CheckBoxes
$(".ads_Checkbox").prop("checked", false);
/*$('input[type=checkbox]').each(function()
{
this.checked = false;
});*/
if (cnt > 0) {
$("#dummy").hide();
}
}
$(document).ready(function() {
$("#price,#t_pro").blur(function() {
$('#total_price').val($('#price').val() * $('#t_pro').val());
});
$(document).on('click', '.delete', function() {
//When delete the record then clear all checkboxes
$('input[type=checkbox]').each(function() {
this.checked = false;
});
var par = $(this).parent().parent(); //tr
par.remove();
cnt--;
if (cnt == 0) {
$("#dummy").show();
}
});
});
* {
font-family: arial;
font-size: 13px;
}
.align-center {
text-align: center;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
}
form div {
clear: left;
margin: 0;
padding: 0;
padding-top: 0.9em;
}
form div label {
float: left;
width: 20%;
font: bold 0.9em Arial, Helvetica, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table cellpadding="2" width="50%" align="center" cellspacing="2" id="myTable">
<tr>
<td colspan=2>
<center>
<font size=4>
<b>Product Detail Form</b>
</font>
</center>
</td>
</tr>
<tr>
<td>
<label for="s_name">Shop Name</label>
</td>
<td>
<input type="text" id="s_name" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="product_names">Product Name</label>
</td>
<td>
<select id="product_names" class="product_name">
<option value="-1" selected>select..</option>
<option value="pc">PC</option>
<option value="laptop">Laptop</option>
<option value="mobile_phone">Mobile Phone</option>
<option value="plasma_screen">Plasma Screen</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="emailid">EmailId</label>
</td>
<td>
<input type="text" id="emailid" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="mobileno">MobileNo</label>
</td>
<td>
<input type="text" id="mobileno" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="r1">What You Are</td>
<td>
<input type="radio" name="are" value="Buyer" id="r1" size="10" checked>
<label for="r1">Buyer</label>
<input type="radio" name="are" value="Seller" id="r2" size="10">
<label for="r2">Seller</label>
</td>
</tr>
<tr>
<td>
<label for="price">Price</label>
</td>
<td>
<input type="text" id="price" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="t_pro">Total Product</label>
</td>
<td>
<input type="text" id="t_pro" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="total_price">Total Price</label>
</td>
<td>
<input type="text" id="total_price" size="30" class="txt">
</td>
</tr>
<tr>
<td>
<label for="1">Product With:</td>
<td>
<input type="checkbox" name="chk1" id="chk1" class="ads_Checkbox" value="Box">Box
<br>
<input type="checkbox" name="chk2" id="chk2" class="ads_Checkbox" value="Bill">Bill
<br>
<input type="checkbox" name="chk3" id="chk3" class="ads_Checkbox" value="Bill-BOx">Bill-BOx
<br>
<input type="checkbox" name="chk4" id="chk4" class="ads_Checkbox" value="Only Product">Only Product
</td>
</tr>
<tr>
<td colspan="2" class="align-center">
<input type="reset">
<input type="button" id="order" value="Order" onclick="AddData()" />
</td>
</tr>
</table>
</form>
<table cellpadding="4" width="50%" align="center" cellspacing="4" id="mytab" border="1">
<tr>
<th>ShopNmae</th>
<th>Product Name</th>
<th>EmailId</th>
<th>MobileNo</th>
<th>What You Are</th>
<th>Price</th>
<th>Total Product</th>
<th>Total Price</th>
<th>Product With</th>
<th colspan="2">Action</th>
</tr>
<tr id="dummy">
<td colspan="11">No data</td>
</tr>
</table>

creating new row on button click

I have an html table with one or more row. I have 4 columns in my table in that one is a checkbox. Two buttons are there "AddRowAbove" and "AddRowBelow". When a particular checkbox is checked and click a button a new row should be added based on the button name. My code looks like this not sure how to achieve the result.
function addNewRowAbove() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
function addNewRowBelow() {
alert("actioned !!!");
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
alert(rowNumber + " - " + rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
$('#maintable tbody').append(newRow);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1" /></td>
<td><input type="text" name="empid"></input>
</td>
<td><input type="text" name="empfname"></input>
</td>
<td><input type="text" name="emplname"></input>
</td>
</tr>
<tr>
<td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2" /></td>
<td><input type="text" name="empid1"></input>
</td>
<td><input type="text" name="empfname1"></input>
</td>
<td><input type="text" name="emplname1"></input>
</td>
</tr>
<tr>
<td></td>
<td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td>
<td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td>
<td></td>
</tr>
</table>
</form>

I added var selectedRow = $( "input:checked" ).parent().parent(); to both of your functions to find the parent row of the checked element, and then used either $(newRow).insertBefore(selectedRow); or $(newRow).insertAfter(selectedRow); depending on the button clicked.
Hopefully this helps.
UPDATE:
In response to comments requesting that the id's of the rows are kept in order even after adding rows dynamically, I've added a SortRowIDs() function which is called at the end of both addNewRowAbove() and addNewRowBelow().
This function grabs all of the <input type="checkbox"/> tags in the <table id="maintable"></table> and then iterates through them using jQuery's .each() method. Each checkbox's parent row is then assigned an Id based on its order in the table. I also added a few comments in the code so that it is easier to follow.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function SortRowIDs() {
// The code below finds all the <tr> elements in the table WITH checkboxes in them.
// This way, we skip the first row containing column headers and the last row containing buttons
// We use the jQuery .each() method to iterate through jQuery-object arrays
$('#maintable').find('tr > td > input[type="checkbox"]').each(function(index) {
// We assign the parent row of the current checkbox to the variable 'currentRow'
let currentRow = $(this).parent().parent();
// Here we give the current row an id based on its position in the table
$(currentRow).attr('id', 'id_' + (index + 1));
// Prints the id's of each row
console.log('Current row\'s id: ' + $(currentRow).attr('id'));
});
// This prints the id attribute of the selected checkbox's parent row, to show that
// the Id's were successfully assigned by the SortRowIDs() function
console.log('');
console.log('Selected row\'s id: ' + $( "input:checked" ).parent().parent().attr('id'));
}
function addNewRowAbove() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) - 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '" /><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"/></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertBefore(selectedRow);
SortRowIDs();
}
function addNewRowBelow() {
var rowNumber = document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1;
var newRow = $('<tr/>');
newRow.html('<td><input type="checkbox" name="radio1" id="radio' + rowNumberNew + '"></input><input type="hidden" id="rowIndex' + rowNumberNew + '" value="' + rowNumberNew + '"/></td><td><input type="text" name="empid" id="empid' + rowNumberNew + '"></input></td><td><input type="text" name="empfname" id="empfname' + rowNumberNew + '"></input></td><td><input type="text" name="emplname" id="emplname' + rowNumberNew + '"></input></td>');
var selectedRow = $( "input:checked" ).parent().parent();
$(newRow).insertAfter(selectedRow);
SortRowIDs();
}
</script>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr>
<td>
<input type="checkbox" name="radio" id="radio"/>
<input type="hidden" id="rowIndex" value="1" />
</td>
<td>
<input type="text" name="empid" />
</td>
<td>
<input type="text" name="empfname" />
</td>
<td>
<input type="text" name="emplname" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="radio1" id="radio1" />
<input type="hidden" id="rowIndex" value="2" />
</td>
<td>
<input type="text" name="empid1" />
</td>
<td>
<input type="text" name="empfname1" />
</td>
<td>
<input type="text" name="emplname1" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()">
</td>
<td>
<input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()">
</td>
<td></td>
</tr>
</table>
</form>

You can use insertBefore to append new row above buttons (give id="button" to row content buttons). Try with below solution:
function addNewRowAbove(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber)- 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
newRow.insertBefore('#button');
}
function addNewRowBelow(){
alert("actioned !!!");
var rowNumber=document.getElementById("rowIndex").value;
var rowNumberNew = parseInt(rowNumber) + 1 ;
alert(rowNumber+" - "+rowNumberNew);
var newRow = $('<tr/>').attr('id', 'row' + rowNumberNew);
newRow.html('<td><input type="checkbox" name="radio1" id="radio'+rowNumberNew+'"></input><input type="hidden" id="rowIndex'+rowNumberNew+'" value="'+rowNumberNew+'"/></td><td><input type="text" name="empid" id="empid'+rowNumberNew+'"></input></td><td><input type="text" name="empfname" id="empfname'+rowNumberNew+'"></input></td><td><input type="text" name="emplname" id="emplname'+rowNumberNew+'"></input></td>');
$('#maintable tbody').append(newRow);
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" border="#729111 1px solid">
<tr>
<th align="center">Select</th>
<th align="center">Employee ID</th>
<th align="center">First Name</th>
<th align="center">Last Name</th>
</tr>
<tr><td><input type="checkbox" name="radio" id="radio"></input><input type="hidden" id="rowIndex" value="1"/></td>
<td><input type="text" name="empid"></input></td>
<td><input type="text" name="empfname"></input></td>
<td><input type="text" name="emplname"></input></td>
</tr>
<tr><td><input type="checkbox" name="radio1" id="radio1"></input><input type="hidden" id="rowIndex" value="2"/></td>
<td><input type="text" name="empid1"></input></td>
<td><input type="text" name="empfname1"></input></td>
<td><input type="text" name="emplname1"></input></td>
</tr>
<tr id="button"><td></td><td> <input type="submit" name="AddRowAbove" value="AddRowAbove" onclick="addNewRowAbove()"></td><td> <input type="submit" name="AddRowBelow" value="AddRowBelow" onclick="addNewRowBelow()"></td><td></td></tr>
</table>
</form>
</body>
</html>

Total becomes NaN after increment 10

I have a calculation table and the total becomes NaN after adding 10 rows.
I have even tried the suggestions as stated within this Stackoverflow article.
I have been testing this for over a day now and cannot fix the error. What am I missing?
jQuery(document).ready(function($){
var counter = 2;
$("#addItem").click(function () {
if(counter>50){
alert("You have reached the maximum items allowed (50)!");
return false;
}
var newTextBoxDiv = $(document.createElement('tr'))
.attr("id", 'itemRow' + counter);
newTextBoxDiv.after().html('<td class="first"><input placeholder="Charge # ' + counter + '" class="chrg" type="text" name="data[' + counter + '][0]" id="chrg' + counter + '" ></td>' + '<td><input placeholder="Item/Part # ' + counter + '" class="item" type="text" name="data[' + counter + '][1]" id="item' + counter + '" ></td>' + '<td><input placeholder="Description ' + counter + '" class="desc" type="text" name="data[' + counter + '][2]" id="desc' + counter + '" ></td>' + '<td style="text-align:center;"><input placeholder="Qty ' + counter + '" class="qty" type="text" name="data[' + counter + '][3]" id="qty' + counter + '" size="5" style="text-align:center;" /></td>' + '<td style="text-align:right;"><input placeholder="Cost ' + counter + '" class="cost" type="text" name="data[' + counter + '][4]" id="cost' + counter + '" size="10" style="text-align:right;" /></td>' + '<td style="text-align:right;"><span class="input-group-addon">$</span><input placeholder="Sub-Total ' + counter + '" class="stotal" type="text" name="stotal'+ counter + '" id="stotal'+ counter +'" size="10" style="text-align:right;" readonly /></td>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$(document).on('keyup', '.cost', function(st){
// grab ID to get row number
thisID = $(this).attr("id");
rowNum = thisID.slice(-1);
//get Amount entered
qty = $('#qty'+rowNum).val();
//get QTY
cost = $('#cost'+rowNum).val();
$('#stotal'+rowNum).val((qty*cost).toFixed(2));
currentCount = counter-1;
var tot = Math.round(0);
$('.stotal').each(function() {
tot += parseFloat($(this).val());
});
$('#preTotal').val((tot).toFixed(2));
$('#grand_total').val((tot).toFixed(2));
});
//calculate preTotal
$(document).on('focusin', '#shipping', function(pt){
var selection = document.getElementById("addShip");
if (selection.checked){
$("#shipping").change(function(preTotal,shipping) { // input on change
var preTotal = document.getElementById('preTotal').value;
var shipping = document.getElementById('shipping').value || 0;
var pTotal = parseFloat(shipping) + parseFloat(preTotal);
document.getElementById('preTotal').value = (pTotal.toFixed(2));
});
} else {
var preTotal = document.getElementById('preTotal').value;
var shipping = document.getElementById('shipping').value || 0;
var sTotal = parseFloat(preTotal);
document.getElementById('preTotal').value = (sTotal.toFixed(2));
}
});
//calculate taxes and total
$(document).on('focusin', '#taxTotal', function(tt){
var selection = document.getElementById("addShip");
//get field results
var preTotal = document.getElementById('preTotal').value || 0;
var shipping = document.getElementById('shipping').value || 0;
var taxTotal = document.getElementById('taxTotal').value || 0;
var taxRate = document.getElementById('taxRate').value || 0;
var gTotal = document.getElementById('grand_total').value || 0;
$("#taxTotal").change(function() { // input on change
var tTotal = document.getElementById('taxTotal').value / document.getElementById('preTotal').value * 100;
document.getElementById('taxRate').value = (tTotal.toFixed(2));
});
});
//calculate total + taxes
$(document).on('focusout', '#taxTotal', function(gt){
var shipping = document.getElementById('shipping').value || 0;
var tTotal = document.getElementById('taxTotal').value || 0;
var gTotal = document.getElementById('grand_total').value;
var fTotal = parseFloat(shipping) + parseFloat(tTotal) + parseFloat(gTotal);
document.getElementById('grand_total').value = (fTotal.toFixed(2));
});
});
}
function focusField() {
$('#addItem').click(function(){
$('.chrg').focus();
});
th {padding: 2px 2px;}
td {padding: 2px 2px;}
input {padding: 0px 2px;}
#addItemBtn {}
input.filler {border-color:#fff;border-style:solid;}
.input-group-addon {
padding: 2px 5px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: center;
background-color: #eee;
box-shadow: inset 0 0 0 1px grey;
border-right: 1px #eee solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TextBoxesGroup" style="width:100%;">
<tr>
<th style="text-align:left;">Charge #</th>
<th style="text-align:left;">Item/Part #</th>
<th style="text-align:left;">Description</th>
<th style="text-align:center;">Qty</th>
<th style="text-align:right;">Cost</th>
<th style="text-align:right;">Sub-total</th>
</tr>
<tr id="itemRow1">
<td><input placeholder="Charge # 1" class="chrg" type="text" id="chrg1" autofocus /></td>
<td><input placeholder="Item/Part # 1" class="item" type="text" id="item1" style="margin-bottom:0 !important" /></td>
<td><input placeholder="Description 1" class="desc" type="text" id="desc1" /></td>
<td style="text-align:center;"><input placeholder="Qty 1" class="qty" type="text" id="qty1" size="5" style="text-align:center;" /></td>
<td style="text-align:right;"><input placeholder="Cost 1" class="cost" type="text" id="cost1" size="10" style="text-align:right;" /></td>
<td style="text-align:right;"><span class="input-group-addon">$</span><input placeholder="Sub-Total 1" class="stotal" type="text" id="stotal1" size="10" style="text-align:right;" readonly /></td>
</tr>
</table>
<table style="width:100%;">
<tr id="rowFiller">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input class="btn btn-primary" type="button" id="addItem" value="Add Item" size="10" style="float:right;" onclick="focusField()" /></td>
</tr>
<!--<tr id="addItemBtn">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="button" id="addItem" value="Add Item" style="float:right;" /></td>
</tr>-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align:right;">
<label style="padding-right:5px;">remove shipping from taxable total
<input type="checkbox" id="addShip" class="addShip" name="addShip" checked ></label>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align:right;">
<label style="font-weight:bold;padding-right:5px;display:inline-block;">Shipping</label>
<span class="input-group-addon">$</span>
<input placeholder="$00.00" name="shipping" id="shipping" size="10" style="float:right;text-align:right;" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="text-align:right;">
<label style="font-weight:bold;padding-right:5px;display:inline-block;">Pre-Total</label>
<input name="preTotal" id="preTotal" size="10" style="float:right;text-align:right;" readonly /></td>
<td></td>
<td>
</td>
<td style="text-align:right;">
<div style="text-align:right;display:inline;border-right:1px #ccc solid;margin-right:5px;">
<label style="font-weight:bold;padding-right:5px;display:inline-block;">Tax</label>
<input placeholder="00" class="taxRate" name="taxRate" id="taxRate" size="1" style="text-align:center;" />
<label style="font-weight:bold;display:inline-block;">%</label>
</div>
<label style="font-weight:bold;padding-right:5px;display:inline-block;">Total Tax</label>
<span class="input-group-addon">$</span><input placeholder="$00.00" name="taxTotal" id="taxTotal" size="10" style="float:right;text-align:right;" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align:right;font-weight:bold;"><label style="font-weight:bold;padding-right:5px;display:inline-block;">Grand Total</label>
<span class="input-group-addon">$</span><input placeholder="$00.00" name="grand_total" id="grand_total" size="10" style="float:right;text-align:right;" readonly /></td>
</tr>
</table>
Update:
I have resolved the issue as shown in the jsfiddle provided.

Add below condition to your code before actually parsing the values to float.
if(preTotal === ""){
preTotal = 0; // assign number value you like
}
and
if(gTotal === ""){
gTotal = 0; // here also.
}
Because, for the first time, these values come as empty strings.
Also, I noticed the "focusin" event being handled here. It fires the handler everytime user goes to put something inside the test box provided.