We Keep Coding

Bootstrap Newbie, I want the function of table 1 differ on table 2

I have a unique error and I am not able to fix it. The thing is, I have a timesheet table that let me add multiple data inside. I want it only to be on Table #1, but as soon as I click the + sign in my table, the same data keeps on showing in my Table #2. I already checked different sites about this. But I cannot find the proper answer. Please help me.
This is the code for my Table #1
$(function () {
var TABLE = $(".table");
//start time
var start_time;
var end_time;
var break_time_start;
var break_time_end;
var end_time;
var add_time;
var hours_array = [];
var minutes_array = [];
$('.table').on('change', '.appt1', function () {
start_time = $(this).val();
});
//break time start
$('.table').on('change', '.appt2', function () {
break_time_start = $(this).val();
});
//break time finish
$('.table').on('change', '.appt3', function () {
break_time_end = $(this).val();
});
$('.table').on('change', '.appt4', function () {
end_time = $(this).val();
let end_time_with_date = moment(end_time, 'HH:mm:ss');
let start_time_with_date = moment(start_time, 'HH:mm:ss');
let break_time_start_with_date = moment(break_time_start, 'HH:mm:ss');
let break_time_end_with_date = moment(break_time_end, 'HH:mm:ss');
//computeTime(start_time,break_time_start,break_time_end,end_time)
let compute_hours_break_time = break_time_end_with_date.diff(break_time_start_with_date, 'hours');
let compute_minutes_break_time = parseInt(moment.utc(moment(break_time_end_with_date, "HH:mm:ss").diff(moment(break_time_start_with_date, "HH:mm:ss"))).format("mm"))
let compute_hours = end_time_with_date.diff(start_time_with_date, 'hours') - compute_hours_break_time;
let compute_minutes = parseInt(moment.utc(moment(end_time_with_date, "HH:mm:ss").diff(moment(start_time_with_date, "HH:mm:ss"))).format("mm")) - compute_minutes_break_time
$(this).closest('tbody tr').find('td:eq(8)').text(compute_hours)
$(this).closest('tbody tr').find('td:eq(9)').text(compute_minutes)
});
function compute(element) {
let hours_sum = 0;
let minutes_sum = 0;
$(".total_hours_hidden").each(function () {
console.warn(parseInt($(this).text()))
hours_sum += parseInt($(this).text());
})
$(".total_minutes_hidden").each(function () {
minutes_sum += parseInt($(this).text());
})
$(".total_hours_worked").text(hours_sum);
$(".total_minutes_worked").text(minutes_sum);
}
$(".compute_button").click(function () {
compute();
})
//end calculation code
$(".table-add").click(function () {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
TABLE.append(clone);
});
$(".table-remove").click(function () {
$(this)
.parents("tr")
.detach();
compute();
});
})
and this is on my Table Html file.
<div class="card-body">
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table table-bordered table-responsive-md table-striped text-center">
<tbody>
<tr>
<th>DATE</th>
<th>START TIME</th>
<th>SITE NAME</th>
<th>TASK</th>
<th>OTHERS</th>
<th>BREAK TIME START</th>
<th>BREAK TIME FINISH</th>
<th>END TIME</th>
<th style="display:none">HOURS HIDDEN</th>
<th style="display:none">Minutes HIDDEN</th>
</tr>
</tbody>
<tbody>
<!-- This is our clonable table line -->
<tr class="hide">
<td><input type="date" size="1" class="date"></td>
<td><input type="time" class="appt1" name="appt" required=""></td>
<td><input type="text" size="10"></td>
<td><input type="text" size="10"></td>
<td><input type="text" size="10"></td>
<td><input type="time" class="appt2" id="appt2" name="appt" required=""></td>
<td><input type="time" class="appt3" id="appt3" name="appt" required=""></td>
<td><input type="time" class="appt4" id="appt4" name="appt" required=""></td>
<td class="total_hours_hidden" style="display:none">0</td>
<td class="total_minutes_hidden" style="display:none"> 0</td>
<td class="table-remove"> x</td>
</tr>
</tbody>
</table>
</div>
<button class="compute_button">
Calculate
</button>
<table style="width: 100%">
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 70%;">
</colgroup>
<tbody>
<tr>
<th>Total Hours: </th>
<th>
<div class="total_hours_worked" style="display:inline"></div>:
<div class="total_minutes_worked" style="display:inline"></div>
</th>
</tr>
</tbody>
</table>
</div>
and this is for table #2.
<div class="card" id="oncallTable" style="display:none">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4">
ON CALL TIME SHEET
</h3>
<!-- Start of scrollable box -->
<div class="card-body">
<div id="" class="table-editable">
<!-- <span class="table-add glyphicon glyphicon-plus"></span> -->
<table class="table table-bordered table-responsive-md table-striped text-center">
<tbody>
<tr>
<th>DATE</th>
<th>START TIME</th>
<th>SITE NAME</th>
<th>TASK</th>
<th>OTHERS</th>
<th>BREAK TIME START</th>
<th>BREAK TIME FINISH</th>
<th>END TIME</th>
<th style="display:none">HOURS HIDDEN</th>
<th style="display:none">Minutes HIDDEN</th>
</tr>
</tbody>
</table>
</div>
</div>
Thank you for helping me.

This is because both your tables table#1 and table#2 have the class name 'table'. So your code:
var TABLE = $(".table");
is referencing to both the tables because of which your code:
TABLE.append(clone);
will append the data to be appended to both the tables.
Instead, you could provide your table#1 a unique id as:
<table id="table-1" class="table table-bordered table-responsive-md table-striped text-center">
and in your TABLE variable you can select table#1 as:
var TABLE = $("#table-1");
That would pretty much fix the issue.

How is it possible to add rows and columns to a table by jQuery?

I have the following table on my page:
<section class="content">
<div class="box">
<div class="box-header with-border">
<div class="row margin-bottom-20">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-end">
<i class="fa fa-plus"> </i>New
</div>
</div>
</div>
</div>
<table class="table table-striped" id="QueryTable">
<thead>
<tr>
<th>Code: </th>
<th class="text-center">Name: </th>
<th class="text-center">Address: </th>
<th class="text-center">Phone: </th>
<th class="text-center">Options: </th>
</tr>
</thead>
<tbody>
<td>Code: </td>
<td class="text-center">Name: </td>
<td class="text-center">Address: </td>
<td class="text-center">Phone: </td>
<td class="text-center">Options: </td>
</tbody>
</table>
</section>
I need to insert rows and columns into this table via javascript. I tried something like:
$('#QueryTable').find('tr').each(function(){
$(this).find('th').eq(n).after('<th>Test </th>');
});
I also tried
$('#QueryTable tr').append('<th>Test</th>')
I also tried 02:
$('#QueryTable tr').each(function()
{
$(this).append('<th>Test</th>');
});
But these codes did not insert a row or column in my table. How do I add rows and columns by javascript (pure or jquery)?

Here is a simple example. I first fixed your table so that your cells are inside a row:
//adds the new column
$('#QueryTable thead tr').append('<th>Test</th>');
//adds a new cell to all existing rows (this assumes that the newly added column does not exist)
//at initialization
$('#QueryTable tbody tr').each(function() {
$(this).append('<td>New Cell</td>');
});
//Adds a new row
$('#QueryTable tbody').append('<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="QueryTable">
<thead>
<tr>
<th>Code: </th>
<th class="text-center">Name: </th>
<th class="text-center">Address: </th>
<th class="text-center">Phone: </th>
<th class="text-center">Options: </th>
</tr>
</thead>
<tbody>
<tr>
<td>Code: </td>
<td class="text-center">Name: </td>
<td class="text-center">Address: </td>
<td class="text-center">Phone: </td>
<td class="text-center">Options: </td>
</tr>
</tbody>
</table>

i have to call two button click events add and remove from jquery tabs,i'm using jquery forms

this is my code with add and remove buttons on a table inside a jquery tab, but when i call click event
it is not calling it.
<div id="tabs-2">
<form id="DSLform">
<table id="table-1" class="add1" border ="1"><!-- DSL -->
<thead>
<tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th >
<th><input type="submit" class="add1" value="+"></th>
<!-- <th><button id="butVal1" type="button"> + </button></th> -->
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no"/> </td>
<td> <input type="text" name="shed"/> </td>
<td> <input type="text" name="schedule"/> </td>
<td><input type="text" name="programme"/> </td>
<td><button class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
and my javascript file is
(document).ready( function() {
$("#butVal1").click(function(){
var rowLen = $('tr.tabRow1').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");
$(".tabRow1:last").children("td").children("input").each(function(index, element)
{
$(element).val("");
});
}
});
$("tabs-1").on("click", "button.remove1", function(){
if($(this).parents("tr").siblings("tr.tabRow1").length > 0)
{
$(this).closest("tr.tabRow1").remove();
}
else
{
alert("you can't remove this record");
}
});
$("#tabs-1").on("click", ".add1, .remove1", function(){
$("td.sno1").each(function(index,element){
$(element).text(index + 1);
});
});
});
i have added my code above, i need this add and submit button to work from jquery tabs, also these textbox values need to be saved as records, how can i identify each row when i add or remove a row from table

In below code i have use .length to get the length of row and added 1 for displaying S.no count because count starts from 1. Then,instead of looping through all inputs i have just use .find("input").val("") to empty all inputs values and then finally use appendTo to append tr particular table only.
Then, when user will click on remove button i have get the id of table which will be unique in all tabs and then i have passed this value to the function resetValues to reset the S.no column count onces any row gets removed. So , using table id i have loop through tbody tr and have reset the counts .
Demo Code :
$(document).ready(function() {
$(function() {
$("#tabs").tabs();
});
//click on add
$(".add").click(function() {
var apendTo = $(this).closest("table").find("tbody")
//get length of trs
var rowLen = $(this).closest("table").find("tbody tr").length + 1;
if (rowLen > 9) {
alert("no of row is reached 10");
} else {
//get cloned of tr
var cloned = $(this).closest("table").find("tbody tr:first").clone(true);
//set s.no
cloned.find("td:eq(0)").text(rowLen);
cloned.find("input").val(""); //empty inputs
cloned.appendTo(apendTo) //appends
}
});
$(document).on("click", "button.remove1", function() {
var table_id = $(this).closest("table").attr("id") //get tablename
if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) {
$(this).closest("tr.tabRow1").remove();
resetValues(table_id); //call to reset values
} else {
alert("you can't remove this record");
}
});
function resetValues(el) {
var counter = 2; //initialze to 2 because 1 is fixed
//looping through tr not first one
$("#" + el).find("tbody tr:not(:first)").each(function() {
//find .sno1 class replace its counter
$(this).find('.sno1').text(counter);
counter++;
})
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>FIRST</li>
<li>SECOND</li>
</ul>
<div id="tabs-1">
<form id="DSLform">
<table id="table-1" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="tabs-2">
<form id="DSLform">
<table id="table-2" class="add1" border="1">
<!-- DSL -->
<thead>
<tr>
<td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
</tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th>
<th><input type="button" class="add" value="+"></th>
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no" /> </td>
<td> <input type="text" name="shed" /> </td>
<td> <input type="text" name="schedule" /> </td>
<td><input type="text" name="programme" /> </td>
<td><button type="button" class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
Note : Above code will work on any table only you need to make sure id is unique for all tables .

when the button is clicked i want the multiple selected checkbox row to be displayed from popup page to parent page

i have a table when the table row is selected.i want that particular row to be appended in another table.
<table class="myTable" border="1">
<tr class="table">
<th class="table">
ID
</th>
<th class="table">
Name
</th>
<th class="table">
Price
</th>
</tr>
<tr class="table">
<td class="table">
1
</td>
<td class="table">
A
</td>
<td class="table">
1500
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
<tr class="table">
<td class="table">
2
</td>
<td class="table">
B
</td>
<td class="table">
3455
</td>
<td>
<input type="checkbox" name="">
</td>
</tr>
</table>
<table id="printTable" border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Price</td>
</tr>
</table>
i have a popup page where i have a table with multiple checkbox.When the user select any of the checkbox and clicked on button that particular row has to be saved from popup page to parent page
<script>
$("table tr").click(function() {
var items=[];
var tablerow = $(this).closest("tr").clone();
var tableData = $(this).children("td").map(function() {
return $(this).text();
}).get();
alert("Your data is: " + $.trim(tableData[0]) + " , " + $.trim(tableData[1]) + " , " + $.trim(tableData[2]));
$(tablerow).children("td:last").html(tableData);
items.push(tablerow);
alert(items);
tablerow.appendTo($("#printTable"));
});
</script>

There is no need to map all the data, you can just clone the tr and append it to the other table. Like so:
<script>
$("table tr").click(function () {
// If you don't use a tbody, remove 'tbody' here
$("#printTable tbody").append($(this).clone());
});
</script>

EDIT: Used loop instead repeating
Probably not the best answer, but this can insert the value into the second table regardless to the column sorting.
https://jsfiddle.net/o4copkrz/2/
$("#input tr").click(function(){
var $this = $(this)
var arrIndex = ["id", "name", "price"]
var arrData = []
for (var i = 0; i < arrIndex.length; i++) {
arrData[arrIndex[i]] = $this.find("[data-" + arrIndex[i] + "]").text()
}
var $clone = $("#output thead tr").clone()
for (var i = 0; i < arrIndex.length; i++) {
$clone.find("[data-" + arrIndex[i] + "]").text(arrData[arrIndex[i]])
arrIndex[i]
};
$clone.appendTo($("#output tbody"))
})

<h3>First clone the row by clicking on row, then click on button to add to another table</h3>
<table id="firstTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
<th>Select</th>
</tr>
<tr class="row">
<td>1</td>
<td>Comp</td>
<td>2000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr class="row">
<td>2</td>
<td>mouse</td>
<td>3000</td>
<td class="removeIt"><input type="checkbox" name="rowSelect" class="selectCheck"/></td>
</tr>
<tr>
</table>
<button id="appendToTable">Append to table</button>
<table id="printTable">
<tr>
<th>id</th>
<th>Name</th>
<th>Price</th>
</tr>
</table>
<div id="clonedData" style="display: none;"></div>
<script>
$(".selectCheck").click(function() {
if($(this).prop("checked") == true){
$("#clonedData").append($(this).parent().parent().clone());
$("#clonedData").find(".removeIt").remove();
}else{
var rowCheck = $(this).parent().parent().clone();
rowCheck.children(".removeIt").remove();
$('#clonedData tr').each(function(){
if(rowCheck.html()==$(this).html()){
$(this).remove();
}
});
}
});
$("#appendToTable").click(function() {
$("#printTable").append($("#clonedData").children().clone());
$("#clonedData").html('');
});
I have also created a fiddle https://jsfiddle.net/kgbet3et/11/ for the same. Please check if it adresses your issue.

$('#myModal').modal('toggle');
$(document).on('change', 'input[type="checkbox"]', function(e){
if($(this).is(":checked"))
{
var row = $(this).closest('tr').html();
$('.table2 tbody').append('<tr>'+row+'</tr>');
}
else
{
$('#row').find('input:checkbox[value="' + $(this).val() + '"]').closest('tr').remove();
}
$('#row').on('click', ':checkbox', function (event) {
$(this).closest('tr').remove();
});
});
<!DOCTYPE html>
<html>
<head>
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="col-md-6">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<table class="table1 table table-bordered" id="echo">
<h3 style="text-align: center;"></h3>
<tr>
<td>1</td>
<td name="echo">A</td>
<td>1500</td>
<td><input type="checkbox" value="1" class="check-box"></td>
</tr>
<tr>
<td id="2">2</td>
<td name="fetal_echo">B</td>
<td>2000</td>
<td><input type="checkbox" value="2" class="check-box"></td>
</tr>
<tr>
<td id="1">3</td>
<td value="abc">C</td>
<td>8500</td>
<td><input type="checkbox" value="3" class="check-box"></td>
</tr>
<p id="output"></p>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="closebtn">Close</button>
</div>
</div>
</div>
</div>
<table class="table2 table table-bordered" id="row">
<tbody>
</tbody>
</table>
<div>
#vijay mishra and #Vishnu Bhadoriya thankyou for your support....You are really awesome.

Jquery.each() iteraring only once

I have a table which is being filled dynamically on button click
This is my table
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
<thead>
<tr>
<th width="20%">Product</th>
<th width="10%">Category</th>
<th width="10%">Pkg Date</th>
<th width="10%">Mfact date</th>
<th width="10%">Expiry</th>
<th width="10%">Batch No.</th>
<th width="8%">Unit Price</th>
<th width="8%">Qty</th>
<th width="10%">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
<tfoot id="grandtot">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
</td>
</tr>
</tfoot>
</table>
I am adding to this table on button click using jquery
var stock = Number($('#currentstockinput').val());
var qty = Number($('#tablettosellinput').val().replace(/[^0-9\.]+/g,""));
var pertabprice = Number($('#prodpricetabcapinput').val().replace(/[^0-9\.]+/g,"")).toFixed(2);
var subtotal = qty * pertabprice;
var pkgdate = $('#pkgdateinput').val();
var manufactdate = $('#manufactinput').val();
var expdate = $('#expdateinput').val();
var batchno = $('#s2_1 option:selected').text();
$('#tablebody').prepend('<tr>'+
'<td class="prodname">'+prod+'</td>'+
'<td class="category">'+type+'</td>'+
'<td class="pkgdate">'+pkgdate+'</td>'+
'<td class="manufactdate">'+manufactdate+'</td>'+
'<td class="expdate">'+expdate+'</td>'+
'<td class="batchno">'+batchno+'</td>'+
'<td class="unitprice">'+pertabprice+'</td>'+
'<td class="qty">'+qty+'</td>'+
'<td class="subtot">'+subtotal+'</td>'+
'<td>'+
'<button class="btn btn-link" type="button">Remove</button>'+
'</td>'+
'</tr>');
Upto this, it is working fine
Now I am trying to assign value from each row to dropdown list on button click before submitting my form to servlet
$('#tSortable_2 tbody tr').each(function() {
alert('Adding option');
$('<option>').val($(this).find(".prodname").text()).text($(this).find(".prodname").text()).appendTo('#prodnd');
$('<option>').val($(this).find(".category").text()).text($(this).find(".category").text()).appendTo('#categoryd');
$('<option>').val($(this).find(".pkgdate").text()).text($(this).find(".pkgdate").text()).appendTo('#pkgdated');
$('<option>').val($(this).find(".manufactdate").text()).text($(this).find(".manufactdate").text()).appendTo('#manufactd');
$('<option>').val($(this).find(".expdate").text()).text($(this).find(".expdate").text()).appendTo('#expd');
$('<option>').val($(this).find(".batchno").text()).text($(this).find(".batchno").text()).appendTo('#batchd');
$('<option>').val($(this).find(".unitprice").text()).text($(this).find(".unitprice").text()).appendTo('#unitd');
$('<option>').val($(this).find(".qty").text()).text($(this).find(".qty").text()).appendto('#qtyd');
$('<option>').val($(this).find(".subtot").text()).text($(this).find(".subtot").text()).appendTo('#subtotd');
})
Now if I have multiple rows in my table the above .each() iterates only once and submits the form.
My form tag contains this code
<form action="customerbill" method="post" id="submittest">
<div class="head clearfix">
<div class="isw-grid"></div>
<h1>Purchase Cart</h1>
</div>
<div class="block-fluid table-sorting clearfix">
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
<thead>
<tr>
<th width="20%">Product</th>
<th width="10%">Category</th>
<th width="10%">Pkg Date</th>
<th width="10%">Mfact date</th>
<th width="10%">Expiry</th>
<th width="10%">Batch No.</th>
<th width="8%">Unit Price</th>
<th width="8%">Qty</th>
<th width="10%">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
<tfoot id="grandtot">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
</td>
</tr>
</tfoot>
</table>
</div>
<select name="prodnd" id="prodnd" style="display:none" >
</select>
<select name="categoryd" id="categoryd" style="display:none" >
</select>
<select name="pkgdated" id="pkgdated" style="display:none" >
</select>
<select name="manufactd" id="manufactd" style="display:none" >
</select>
<select name="expd" id="expd" style="display:none" >
</select>
<select name="batchd" id="batchd" style="display:none" >
</select>
<select name="unitd" id="unitd" style="display:none" >
</select>
<select name="qtyd" id="qtyd" style="display:none" >
</select>
<select name="subtotd" id="subtotd" style="display:none" >
</select>
<div class="toolbar clear clearfix">
<div class="right">
<div class="btn-group">
<button id="printreport" type="submit" class="btn btn-small btn-warning" onClick="submitForm()"><span>Print</span></button>
</div>
</div>
</div>
</form>
The problem is that the .each() function iterates only once and only the values inside the first row are getting popuated in the dropdown lists.
The .each() function iterates only once when there are multiple rows in table.

You could try this, but I do not believe it will work right off the bat. I need to see more information, but you need to try something new.
$('#tSortable_2').find('tbody').find('tr').each(function(){ //do this });
This will at least give you the array you're looking for in a more correct way. (Less wasteful way?) It isn't a huge fix, or even a real fix it is just something new so try that and we will go from there. Also... fiddle.