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);
}

Change value of input in sibling hidden TD

When my delete button is clicked I would like to change the value of the "is_active" input that has the class of 'active' value from "yes" to "no".
So far I tried to using siblings to try and select the input with the class of 'active'. No luck.
Here is my code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).siblings("td").next().find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>

I figured it out, here is the updated code:
<script type="text/javascript">
$(document).on("click", ".delete", function(){
if ($(this).parents('.idcheck').length){
$(this).closest('tr').find('.active').val('no');
$(this).parents("tr").hide();
}
else
{$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
</script>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
<th>Street</th>
<th>City</th>
<th>Ward</th>
<th>Precinct</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<form id="" class="form" name="parts" method="post" action="">
<tr class="idcheck">
<td style="display:none;"><input type="hidden" class="form-control" name="username" id="username" value="user"></td>
<td><input type="text" class="form-control" name="first_name" id="first_name" value="John"></td>
<td><input type="text" class="form-control" name="last_name" id="last_name" value="Doe"></td>
<td><input type="text" class="form-control" name="county" id="county" value="my county"></td>
<td><input type="text" class="form-control" name="street" id="street" value="456 easy street"></td>
<td><input type="text" class="form-control" name="city" id="city" value="town"></td>
<td><input type="text" class="form-control" name="ward" id="ward" value="5"></td>
<td><input type="text" class="form-control" name="precinct" id="precinct" value="2"></td>
<td style="display:none;"><input type="hidden" class="form-control" name="id" id="id" value="1"></td>
<td style="display:none;"><input type="hidden" class="form-control active" name="is_active" id="is_active" value="yes"></td>
<td><a class="delete" title="" data-toggle="tooltip" data-original-title="Delete"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
I changed the line from :
$(this).siblings("td").next().find('.active').val('no');
To this:
$(this).closest('tr').find('.active').val('no');

How to dynamically create database driven select field with php

I'm trying to make an invoice script with PHP+MySQL. I made my Invoice Entry Screen. Everything working perfectly. I also added "Add New Line" button.
Here is the problem, when I clicked the "Add New Line" all functions which used on first line are disabled. I do not have enough knowledge on JS.
Here are the Codes:
PHP:
<div class="table-striped" id="dataTable">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Product No</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="ekleaq">
<tr>
<td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td>
<td>
<div class="col-xs selectContainer">
<select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])">
<?php
while($row = $result1->fetch_assoc()){
unset($id, $name, $ax1, $ax2);
$id = $row['inv_products_id'];
$name = $row['inv_products_no'];
$ax1 = $row['inv_products_desc'];
$ax2 = $row['inv_products_price'];
echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>';
}
?>
</select>
</div>
</td>
<td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td>
<td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td>
<td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td>
<td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td>
<td><button type="button" class="btn btn-default addButton" id="ekle"><i class="fa fa-plus"></i></button></td>
</tr>
</tbody>
</table>
</div>
JS:
<script>
$("#ekle").click(function(){
$("#ekleaq")
.append('<tr><td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td><td> \
<div class="col-xs selectContainer"><select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])"> "<?php while($row = $result1->fetch_assoc()){ unset($id, $name, $ax1, $ax2);$id = $row['inv_products_id'];$name = $row['inv_products_no'];$ax1 = $row['inv_products_desc'];$ax2 = $row['inv_products_price'];echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>'; } ?>" </select> \
</div></td><td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td><td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td><td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td><td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td></tr>');
});
function ShowData(obj)
{
document.getElementById('decription1').value = obj.getAttribute('data-ax1');
document.getElementById('price1').value = obj.getAttribute('data-ax2');
}
function CalculateData(input)
{
price = document.getElementById('price1');
quantity = document.getElementById('quantity1');
amount1.value = price.value * quantity.value;
}
</script>

Frozen Columns Vertical Scroll Issue

FIDDLE
I have written code to keep fixed first 2 columns & other columns are horizontally scrollable.
My problem is, I want a fixed height set to the table so that it is vertically also scrollable.
<div class="table-responsive" style="width: 400px; overflow-x:scroll; margin-left:354px;">
<table class="table table-bordered" border="1">
<thead>
<tr class="tblHeadings">
<th class="fixCol1 headCol">
<div style="height: 40px;padding-top: 19px;">Code</div>
</th>
<th class="fixCol2 headCol">
<div style="height: 40px;padding-top: 19px;">Name</div>
</th>
<th style="width:120px;height: 54px;">Days
<input type="hidden" name="monthlyField" value="LD">
</th>
<th style="width:120px;height: 54px;">EARNG1
<input type="hidden" name="monthlyField" value="EARNG1">
</th>
<th style="width:120px;height: 54px;">EARNG2
<input type="hidden" name="monthlyField" value="EARNG2">
</th>
<th style="width:100px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixCol1">GT001
<input type="hidden" name="empID" value="1">
<input type="hidden" name="empCode" value="GT001">
</td>
<td class="fixCol2">Brock</td>
<td>
<input type="number" max="31" step="0.01" value="" name="1|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG1" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG2" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG3" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG4" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="1|EARNG5" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'1')">Delete</button>
</td>
</tr>
<tr>
<td class="fixCol1">GT002
<input type="hidden" name="empID" value="2">
<input type="hidden" name="empCode" value="GT002">
</td>
<td class="fixCol2">John</td>
<td>
<input type="number" max="31" step="0.01" value="" name="2|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG1" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG2" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG3" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG4" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="2|EARNG5" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'2')">Delete</button>
</td>
</tr>
<tr>
<td class="fixCol1">GT003
<input type="hidden" name="empID" value="3">
<input type="hidden" name="empCode" value="GT003">
</td>
<td class="fixCol2">Walker Ross</td>
<td>
<input type="number" max="31" step="0.01" value="" name="3|LD" class="form-control tdTextboxes">
</td>
<td>
<input type="number" step="0.01" value="" name="3|WEEKOFF_DAYS" class="form-control tdTextboxes">
</td>
<td>
<button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'3')">Delete</button>
</td>
</tr>
</tbody>
</table>

Since it looks like you're using Bootstrap, I took the liberty to make a Bootply demo of what you're trying to achieve.
You already had the solution really, the only thing was to apply fixed height to the table-responsive class rather than to the table class.
So I simply added height:200px; to the right class (btw, in general try to avoid in-line styling).

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>