We Keep Coding

Fill inputs that are generated dynamically with jquery while selecting an option in the select box

I have created the GUI that looks like this:
enter image description here
the code for this part is:
<table class="table table-responsive table-bordered table-hover">
<thead>
<th>Shërbimi</th>
<th>Përshkrimi</th>
<th>Njësia</th>
<th>Çmimi</th>
<th>Sasia</th>
<th>Total</th>
<th><input type="button" value="+" id="add" class="btn btn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td width="25%">
<select name="service[]" id="sh" class="form-control sherbimi" aria-describedby="llojisherbimit" required>
<option selected="selected" value="">Zgjedh Shërbimin</option>
<?php
$service = new \Admin\Lib\Service();
$services=$service->find_all();
foreach ($services as $s){
echo "<option value='".$s->id ."' class='sale-select' selected='selected'> "
.$s->service_name . "</option>";
}
?>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni shërbimin.
</div>
</td>
<td width="30%" >
<input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required >
<div class="invalid-feedback">
Ju lutem plotësoni përshkrimin.
</div>
</td>
<td width="15%">
<select name="unit[]" class="form-control" aria-describedby="llojinjesis" required>
<option value="">Zgjedh Njësin</option>
<option value='cope'> Copë </option>
<option value='dite'> Ditë </option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni njësin.
</div>
</td>
<td width="10%" >
<input type="text" id="cmimi" class="form-control price" name="price[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni çmimin.
</div>
</td>
<td width="10%">
<input type="text" class="form-control quantity" name="quantity[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni sasinë.
</div>
</td>
<td width="10%">
<input type="text" class="form-control amount" name="amount[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni totalin.
</div>
</td>
<td>
<!-- <a href="#" class="btn btn-danger a-btn-slide-text remove">
<span><strong>x</strong></span></a> -->
</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
<th></th>
</tfoot>
</table>
The rows of the table are generated dynamically with javascript, the code for generating the rows looks like this:
function addnewrow()
{
vartr = '<tr>'+
'<td><?php
echo '<select id="sh" name="service[]" class="form-control sherbimi" aria-describedby="llojisherbimit" required>';
echo '<option selected="selected" value=""> Zgjedh opsionin </option>';
$service = new \Admin\Lib\Service();
$services=$service->find_all();
foreach ($services as $s){
echo '<option value="'.$s->id .'" class="sale-select" selected="selected"> '
.$s->service_name. '</option>';
}
echo '</select>';
?></td>'+
'<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>'+
'<td><select name="unit[]" class="form-control unit"><option value=""> Zgjidh Njësine </option><option value="cope"> Copë </option>'+
'<option value="dite">Ditë </option></select></td>'+
'<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>'+
'<td><input type="text" class="form-control quantity" name="quantity[] required"></td>'+
'<td><input type="text" class="form-control amount" name="amount[]" required></td>'+
'<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span>'+
'</tr>';
$('.detail').append(vartr);
}
I fill the select box with the data from a table using php .
What i'm trying to do is getting the data of the specified service(Sherbimet) while selecting that option in the select box and display these data in the inputs of the specified row(rows are created dynamically).
I've done it for the first row, the data is displayed well, but for the other rows it is changing result all the inputs of all the rows with the same data.
The code for this looks like this:
$(document).ready(function() {
$(document).on('change','#sh',function(e){
e.preventDefault();
var empid = $(this).val();
$.ajax({
method:"POST",
url: 'sale_data.php',
dataType: "JSON",
data: 'empid='+ empid,
cache: false,
success: function(data) {
var a= data.description;
var b=data.price;
$('input[name="description[]"]').val(a);
$('input[name="price[]"]').val(b);
}
});
});
});

First of all try cleaning the html code inside the javascript using backticks (``) for comments
function addNewRow() {
var tableRow = `
<tr>
<td>
<select
onchange="fillData(this)"
name="service[]"
class="form-control sherbimi"
aria-describedby="llojisherbimit" required>
<option selected="selected" value=""> Zgjedh opsionin </option>
<option value="5" class="sale-select">5</option>
</select>
</td>
<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>
<td>
<select name="unit[]" class="form-control unit">
<option value="">Zgjidh Njësine </option>
<option value="cope"> Copë </option>
<option value="dite">Ditë </option>
</select>
</td>
<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>
<td><input type="text" class="form-control quantity" name="quantity[] required"></td>
<td><input type="text" class="form-control amount" name="amount[]" required></td>
<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>
</tr>
`
$('.detail').append(tableRow);
}
use proper naming syntax for functions and variables e.g addnewrow to addNewRow, always declare variables with var, const or let.
results of php code store in a javascript variable, as the php code will execute only on the server side and if you need something dynamic
from php you should use ajax otherwise it will not work. In your case
it is working as php its echo-ing out the html code that will be used
for preparing the results of a function.
the problem with your code is that you are not passing the certain elemenet that is being changed but rather you are trying to select the
element via class selectors, that one is always defaulting to the
first selector instead what you need to do is:
on the html side call the function fillData with the paramete this like:
<table class="table table-responsive table-bordered table-hover">
<thead>
<th>Shërbimi</th>
<th>Përshkrimi</th>
<th>Njësia</th>
<th>Çmimi</th>
<th>Sasia</th>
<th>Total</th>
<th>
<button id="add" class="btn btn-primary" onclick="addNewRow()">+</button></th>
</thead>
<tbody class="detail">
<tr>
<td width="25%">
<select name="service[]" onchange="fillData(this)" class="form-control sherbimi" aria-describedby="llojisherbimit" required>
<option selected="selected" value="" disabled="disabled">Zgjedh Shërbimin</option>
<option value='1' class='sale-select'>1</option>
<option value='2' class='sale-select'>2</option>
<option value='3' class='sale-select'>3</option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni shërbimin.
</div>
</td>
<td width="30%" >
<input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required >
<div class="invalid-feedback">
Ju lutem plotësoni përshkrimin.
</div>
</td>
<td width="15%">
<select name="unit[]" class="form-control" aria-describedby="llojinjesis" required>
<option value="">Zgjedh Njësin</option>
<option value='cope'> Copë </option>
<option value='dite'> Ditë </option>
</select>
<div class="invalid-feedback">
Ju lutem plotësoni njësin.
</div>
</td>
<td width="10%" >
<input type="text" id="cmimi" class="form-control price" name="price[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni çmimin.
</div>
</td>
<td width="10%">
<input type="text" class="form-control quantity" name="quantity[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni sasinë.
</div>
</td>
<td width="10%">
<input type="text" class="form-control amount" name="amount[]" required>
<div class="invalid-feedback">
Ju lutem plotësoni totalin.
</div>
</td>
<td>
<!-- <a href="#" class="btn btn-danger a-btn-slide-text remove">
<span><strong>x</strong></span></a> -->
</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
<th></th>
</tfoot>
</table>
also change the addNewRow function so it includes this variable (dont forget to use your version as I removed the php stuff from here):
function addNewRow() {
var tableRow = `
<tr>
<td>
<select
onchange="fillData(this)"
name="service[]"
class="form-control sherbimi"
aria-describedby="llojisherbimit" required>
<option selected="selected" value=""> Zgjedh opsionin </option>
<option value="5" class="sale-select">5</option>
</select>
</td>
<td><input type="text" id="pershkrimi" value="" class="form-control" name="description[]" required ></td>
<td>
<select name="unit[]" class="form-control unit">
<option value="">Zgjidh Njësine </option>
<option value="cope"> Copë </option>
<option value="dite">Ditë </option>
</select>
</td>
<td><input type="text" id="cmimi" class="form-control price" name="price[]" required></td>
<td><input type="text" class="form-control quantity" name="quantity[] required"></td>
<td><input type="text" class="form-control amount" name="amount[]" required></td>
<td><a href="#" class="btn btn-danger a-btn-slide-text remove"><span><strong>x</strong></span></td>
</tr>
`
$('.detail').append(tableRow);
}
and then filldata function:
function fillData(element) {
var empid = element.value
$.ajax({
method:"POST",
url: 'sale_data.php',
dataType: "JSON",
data: 'empid='+ empid,
success: function(data) {
$('input[name="description[]"]').val(data.description);
$('input[name="price[]"]').val(data.price);
}
});
}

Error inserting multi row values with a form

I have been facing a problem that I have been looking everywhere for a soultion.
I want to make a page where you can insert new rows to a form table, then use these values to insert into database.
Here is an image of how the page I want to make will look like. sales form
The idea behind the page is that one receipt id will be generated and inside there can be many items that users can add, hence the multiple rows.
Here is the code for the form page.
<?php
include('session.php');
?>
<?php
$ItemID = "ItemID";
$ItemName = "ItemName";
$UnitPrice = "UnitPrice";
$sql = "SELECT ItemID,ItemName,UnitPrice FROM Item";
$result = $db->query($sql);
?>
<html>
<head>
<title>Add Sales</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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Add new Sales Record</h1>
</div>
<div class="container">
<button class="w3-button w3-black w3-round-large">Back</button>
</div>
<div class="container" align="right">
<table class="table-sm">
<tbody>
<tr class="table-primar">
<th scope="col" style="padding-right: 50px;">ItemID</th>
<th scope="col" style="padding-right: 50px">ItemName</th>
<th scope="col">UnitPrice</th>
</tr>
<?php
while($rows = $result->fetch_assoc()) {
?>
<tr class="contents">
<td><?php echo $rows[$ItemID]; ?></td>
<td><?php echo $rows[$ItemName]; ?></td>
<td><?php echo $rows[$UnitPrice]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<hr>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
ItemID
</th>
<th class="text-center">
Amount
</th>
<th class="text-center">
Price Sold
</th>
<th class="text-center">
Branch ID
</th>
<th class="text-center">
EmployeeID
</th>
<th class="text-center">
MemberID
</th>
</tr>
</thead>
<tbody>
<form action="addsales.php" method="post">
<tr id='addr0'>
<td>
<input type="text" name='item[][itemid]' placeholder='ItemID' class="form-control"/>
</td>
<td>
<input type="text" name='item[][amount]' placeholder='Amount' class="form-control"/>
</td>
<td>
<input type="text" name='item[][pricesold]' placeholder='PriceSold' class="form-control"/>
</td>
<td>
<input type="text" name='item[][branchid]' placeholder='BranchID' class="form-control"/>
</td>
<td>
<input type="text" name='item[][employeeid]' placeholder='EmployeeID' class="form-control"/>
</td>
<td>
<input type="text" name='item[][memberid]' placeholder='MemberID' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
<input class="w3-button w3-black w3-round-large" type="submit" name='submit' value="Submit"/>
</form>
</tbody>
</table>
</div>
</div>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 130px;">New row</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr'+(i-1)).find('input').attr('disabled',true);
$('#addr' + i).html("<td><input name='item[][itemid]' placeholder='ItemID' class='form-control input-md'/></td><td><input type='text' name='item[][amount]' placeholder='Amount' class='form-control input-md'/></td><td><input type='text' name='item[][pricesold]' placeholder='PriceSold' class='form-control input-md'/></td><td><input type='text' name='item[][branchid]' placeholder='BranchID' class='form-control input-md'/></td><td><input type='text' name='item[][employeeid]' placeholder='EmployeeID' class='form-control input-md'/></td><td><input type='text' name='item[][memberid]' placeholder='MemberID' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
</script>
</body>
</html>
The values will be handled in another php page.
<?php
include('session.php');
print_r($_POST);
$ItemIDs = $_POST['itemid'];
$PriceSolds = $_POST['pricesold'];
$QtySolds = $_POST['amount'];
$Date = date("Y-m-d h:i:sa");
$BranchIDs = $_POST['branchid'];
$EmployeeIDs = $_POST['employeeid'];
$MemberIDs = $_POST['memberid'];
$size = sizeof($ItemIDs);
$sql2 = "INSERT INTO Receipt_seq VALUES (NULL);";
$db->query($sql2);
for($i = 0; $i < $size; $i++ ){
$ItemID = $ItemIDs[$i];
$PriceSold = $PriceSolds[$i];
$QtySold = $QtySolds[$i];
$BranchID = $BranchIDs[$i];
$EmployeeID = $EmployeeIDs[$i];
$MemberID = $MemberIDs[$i];
$sql = "INSERT INTO Receipt (ItemId,PriceSold,QtySold,RDate,BranchID,EmployeeID,MemberID) VALUES ('{$ItemID}', '{$PriceSold}', '{$QtySold}','{$Date}','$BranchID','$EmployeeID','$MemberID')";
$db->query($sql);
}
?>
The Id for the receipt will be automatically generated using a trigger system. The only problem I have right now is that I can send in one row data just fine. But the moment I add a second row, it gives me an error Undefine index .... I tried to use print_r($_POST); to see what is happening and this is the result. When I submitted one row of data it looked fine one row But when I added the second row it gave me this error more than one row error. I am a beginner at making website so I am not sure what I am doing is correct or not. Please help, thank you. I added and image of what my sales page will look like so you might have a better understanding of what I am trying to do Sales page.

Just to clarify points above, you MUST set the inputs with attribute readonly NOT disabled so that the previous input rows get included.
Then just follow what I said in the comments by adding (concatenating) the index into the dynamically added input rows:
$('#addr' + i).html("<td><input name='item["+i+"][itemid]'
// ^ add the dynamic index here
Sidenote: Don't forget to wrap the table with the form tag
I'll just add the important bits, so all in all:
a. Form tag before table tag
<div class="col-md-12 column">
<form action="" method="post"> <!-- this -->
<table class="table table-bordered table-hover" id="tab_logic">
b. change to readonly instead of disabled attribute and add the index in the "add row"
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr'+(i-1)).find('input').attr('readonly',true);
$('#addr' + i).html("<td><input name='item["+i+"][itemid]' placeholder='ItemID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][amount]' placeholder='Amount' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][pricesold]' placeholder='PriceSold' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][branchid]' placeholder='BranchID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][employeeid]' placeholder='EmployeeID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][memberid]' placeholder='MemberID' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
Full code:
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr'+(i-1)).find('input').attr('readonly',true);
$('#addr' + i).html("<td><input name='item["+i+"][itemid]' placeholder='ItemID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][amount]' placeholder='Amount' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][pricesold]' placeholder='PriceSold' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][branchid]' placeholder='BranchID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][employeeid]' placeholder='EmployeeID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][memberid]' placeholder='MemberID' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form action="" method="post">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
ItemID
</th>
<th class="text-center">
Amount
</th>
<th class="text-center">
Price Sold
</th>
<th class="text-center">
Branch ID
</th>
<th class="text-center">
EmployeeID
</th>
<th class="text-center">
MemberID
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<input type="text" name='item[0][itemid]' placeholder='ItemID' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][amount]' placeholder='Amount' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][pricesold]' placeholder='PriceSold' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][branchid]' placeholder='BranchID' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][employeeid]' placeholder='EmployeeID' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][memberid]' placeholder='MemberID' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
<input class="w3-button w3-black w3-round-large" type="submit" name='submit' value="Submit"/>
</tbody>
</table>
</form>
</div>
</div>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 130px;">New row</button>
</div>

how to delete child row only in jquery datatables?

I have a 2 row staticly its a default. and i want to add more rows in below the default rows.. and i dont knwo how to delete child row without deleting parent row..
My parent row is that default two rows. i dont want to delete that two rows.. i want to delete child rows only..
var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
// delete row
$(document).ready(function() {
$('.dlt-icon').click(DeleteRow);
});
function DeleteRow() {
$(this).parents('tr').first().remove();
}
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<!-- First row -->
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon button-add">
</td>
</tr>
<!-- Second Row -->
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>
If you arent understand please let me knw..

if you dont want to delete first two row that already created, then use .jsrow as below
Another thing that you need to understand is tha use of classes, you added class button-add in both button add and remove, so see my code and correct it.
var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
// delete row
});
$(document).on( 'click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<!-- First row -->
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon ">
</td>
</tr>
<!-- Second Row -->
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>

How to Fix the Code In Order to lets the Function Working

I'm getting a django project to fix the error inside the code, may I know what is the problem of this few line of code which cause the add and delete button on the webpage does not function well?
I've tried fixing some typo error in the code, but it's still not working so I'm changing back the code to it's original way.
{% extends "app/layout.html" %}
{% block content %}
<script>
$(document).ready(function () {
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input
name='item_id' type='item_id' placeholder='Item ID'
class='form-control input-md' /> </td><td><input
name='item_name' type='text' placeholder='Item Name'
class='form-control input-md'></td><td><input
name='description' type='text' placeholder='Description'
class='form-control input-md' ></td><td><input name='quantity'
type='text' placeholder='Quantity' class='form-control input-
md' /> </td><td><input name='unit_price' type='text'
placeholder='Price Per Unit' class='form-control input-md' />
</td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$('#addr'+(i-1)).html('');
i--;
}
});
});
</script>
<div class="formpurchaseorder margintop" >
<form class="purchaseordersubmission"
action="purchaserequisitionconfirmation" method="POST">
{% csrf_token %}
<div class="row margintop">
<div class="col">
<input type="text" class="form-control" name="purchase_requisition_id" value="{{purchase_requisition_id}}" placeholder="Purchase Requisition ID" readonly>
</div>
<div class="col">
<input type="text" class="form-control" name="person_id" id="person_id" value="{{person_id}}"placeholder="Person ID" readonly>
</div>
</div>
<br/>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">#</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Name</th>
<th class="text-center">Description</th>
<th class="text-center">Quantity</th>
<th class="text-center">Price Per Unit</th>
</tr>
</thead>
<tbody name="item_rows">
<tr id='addr'>
<td>1</td>
<td> <input type="text" name='item_id' placeholder='Item id' class="form-control" /> </td>
<td><input type="text" name="item_name" placeholder='Item name' class="form-control" ></td>
<td><input type="text" name='description' placeholder='Description' class="form-control" /></td>
<td><input type="text" name='quantity' placeholder='Quantity' class="form-control" /></td>
<td><input type="text" name='unit_price' placeholder='Price Per Unit' class="form-control" /></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id='add_row' class="pull-left btn btn-default">Add Item</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Item</a>
<div class="margintop">
<button type="submit" class="btn btn-success btn-square buttonsize">Submit</button>
<a class="btn btn-danger btn-square buttonsize" href="/menu">Cancel</a>
</div>
</form>
</div>
{% endblock %}

Variables like item_id will only be available to you when you submit the form and then you'll be redirected to a URL with all the variables posted on it.
Eg. localhost:8000/index.html?item_id=xyz&item_name=abc&description=desc&quantity=12&unit_price=30
Notice the variable name with their values in the URL. This will only be available after you submit the form.
So Instead of adding the event listener on add_row, use :
$('#formid').submit(function(e) {
// Add the rows here
});
PS:- If you really want to do it this way, then you can get the text box values by :
First giving an ID to the input text box :
<input type="text" id='item_name_textbox' name='item_id' placeholder='Item id' class="form-control" /> </td>
var item_name = document.getElementById('item_name_textbox').value;
and then using it in your function.

looks like your script is loaded before the HTML fully rendered and perhaps jQuery.
Try to put this script section at the end of your <body> (eventually in app/layout.html).
After the jQuery implementation.

Dynamically Add Remove Rows on Click Not Working Fully after Adding Select Drop-Down Options

This was working fine before without the <select> and <option> drop-downs...
but trying to add a drop-down menu to this, it is functioning improperly (see the fiddle or more details below). Not seeing any errors popping up in console.
JSFiddle (Working): https://jsfiddle.net/zxqrpLvo/
JSFiddle (Not Working*): https://jsfiddle.net/a2a4584z/1/
Working (without Select Drop-Down):
HTML
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" id="inputform">
<form id="inventorytoadd">
<table class="table table-striped table-responsive table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center" width="10%">
#
</th>
<th class="text-center" width="68%">
SKU
</th>
<th class="text-center" width="22%">
Quantity
</th>
</tr>
</thead>
<tbody>
<tr id='addi0'>
<td class="text-center numcell" width="10%">
1
</td>
<td width="68%">
<input type="text" name='sku[]' id="sku0" placeholder='SKU' class="form-control"/>
</td>
<td width="22%">
<input type="text" name='qty[]' id="qty0" placeholder='Quantity' class="form-control"/>
</td>
</tr>
<tr id='addi1'></tr>
</tbody>
</table>
</form>
</div>
<div class="col-md-3">
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 add-delete-rows" id="inventory-add">
<button id="add_row" class="btn btn-primary pull-left">Add Row</button><button id='delete_row' class="pull-right btn btn-danger">Delete Row</button>
</div>
<div class="col-md-3">
</div>
</div>
Along with accompanying jquery code
jQuery/Javascript
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addi' + i).html("<td class='text-center numcell'>" + (i + 1) + "</td><td><input name='sku[]' type='text' placeholder='SKU' class='form-control input-md' /> </td><td><input name='qty[]' type='text' placeholder='Quantity' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addi" + (i - 1)).html('');
i--;
}
});
});
Not Working with Select Drop-Down
HTML
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10" id="inputform">
<form id="inventorytoadd">
<table class="table table-striped table-responsive table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
SKU
</th>
<th class="text-center">
Category
</th>
<th class="text-center">
Quantity
</th>
</tr>
</thead>
<tbody>
<tr id='addi0'>
<td class="text-center numcell">
1
</td>
<td>
<input type="text" name='sku[]' id="sku0" placeholder='SKU' class="form-control"/>
</td>
<td>
<div class="select">
<select name="category[]">
<option title="Gaskets" value="Gaskets">Gaskets</option>
<option title="Oil Filters" value="Oil Filters">Oil Filters</option>
<option title="Air Filters" value="Air Filters">Air Filters</option>
</select>
</div>
</td>
<td>
<input type="text" name='qty[]' id="qty0" placeholder='Quantity' class="form-control"/>
</td>
</tr>
<tr id='addi1'></tr>
</tbody>
</table>
</form>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 add-delete-rows" id="inventory-add">
<button id="add_row" class="btn btn-primary">Add Row</button><button id='delete_row' class="btn btn-danger">Delete Row</button>
</div>
<div class="col-md-3">
</div>
</div>
jQuery/Javascript
$(document).ready(function() {
var i = 1;
$('#add_row').click(function() {
$('#addi' + i).html('<td class="text-center numcell">' + (i + 1) + '</td><td><input name="sku[]" type="text" placeholder="SKU" class="form-control input-md" /></td><td><div class="select"><select name="category[]"><option title="Gaskets" value="Gaskets">Gaskets</option><option title="Oil Filters" value="Oil Filters">Oil Filters</option><option title="Air Filters" value="Air Filters">Air Filters</option></select></div></td><td><input name="qty[]" type="text" placeholder="Quantity" class="form-control input-md"></td>');
$('tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
i++;
});
$('#delete_row').click(function() {
if (i > 1) {
$('#addi' + (i - 1)).html("");
i--;
}
});
});
As you can see by the fiddle, it is only allowing me to add a row once.. and for some reason it takes two clicks to delete a row. It appears to be identical code functionality from what I can see, what is the issue here?

you miss "#" on your selector: $('#tab_logic')
$(document).ready(function() {
var i = 1;
$('#add_row').click(function() {
$('#addi' + i).html('<td class="text-center numcell">' + (i + 1) + '</td><td><input name="sku[]" type="text" placeholder="SKU" class="form-control input-md" /></td><td><div class="select"><select name="category[]"><option title="Gaskets" value="Gaskets">Gaskets</option><option title="Oil Filters" value="Oil Filters">Oil Filters</option><option title="Air Filters" value="Air Filters">Air Filters</option></select></div></td><td><input name="qty[]" type="text" placeholder="Quantity" class="form-control input-md"></td>');
$('#tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
i++;
});
$('#delete_row').click(function() {
if (i > 1) {
$('#addi' + (i - 1)).html("");
i--;
}
});
});