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

How to Hide (or Show) child drop-down (dynamic html) in jquery?

Here create a dynamic table row when clicking on + button add a new row and click on - button remove row design like this,
Here subject drop-down display and also instructor drop-down display but the problem is when select subject maths instructor drop-down show and when select a science instructor drop-down hide but it's changing in all drop-down.
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
if (jQuery.inArray(topic_name, names) != '-1') {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent().find('td').hide();
} else {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent('td').find('td').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr id="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr id="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" id="CourseScheduleScheduleInstructor" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>

That happens because of duplicate identifiers, the id attribute must be unique in the same document.
That will be fixed by replacing the duplicate ones with common classes.
Then your selector could be simply :
$(this).closest('tr').find('.instructor_name');
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
var instructor_name = $(this).closest('tr').find('.instructor_name');
if ($.inArray(topic_name, names) != -1) {
instructor_name.hide();
} else {
instructor_name.show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr class="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr class="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>

Increasing number in jquery as row is added

May the question will be difficult for explaining and understanding too.
I have a table which has some rows and button of add row.
Table rows contain input field, having specific name.
For eg.: I have two rows, the first row has name="qty1" then the second row is having name="qty2". And for adding the third row, there is button add row.
So, now the third row will be added.
The name of input in the third row should be name="qty3", but it is only name="qty".
I tried:
$(document).ready(function(){
$(".add-row").click(function(){
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty" value="" placeholder="Quantity"></td></tr>';
$("table").append(markup);
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr>
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</table>
<input type="button" class="add-row" value="Add Row">
</form>
So, my question is how to increase the numbers as per rows?

Use a counter as name and increment it in each click:
Update: Use insertBefore() method to add the rows before the submit button.
I reccomend you take a look on DOM insertion outside and DOM insertion inside methods.
$(document).ready(function() {
var cont = 3
$(".add-row").click(function() {
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty' + cont + '" value="" placeholder="Quantity"></td></tr>';
$(markup).insertBefore($('button[type="submit"]').closest("tr"));
cont++;
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr>
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</table>
<input type="button" class="add-row" value="Add Row">
</form>

Count children of table tbody with .children().length() to get the next number
var nextNumber = $("#chiru_inv tbody").children().length - 2;
Working jsfiddle
You can also consider learning technologies that are superior to jquery in these kinds of tasks, such as React.js, Angular, Vue.js

When the page loads, get the number of inputs that already exist. Then when you add new input, always increase that number and add it to the input's name qty + the number of existing inputs.
$(document).ready(function(){
var elCount = $("form table input[name^='qty']").length;
$(".add-row").click(function(){
elCount++;
var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty' + elCount + '" value="" placeholder="Quantity"></td></tr>';
$("table").append(markup);
});
});

Ok so I would suggest you flag your rows in the table by adding a class in your markup (in my example qtyRow):
var markup = '<tr class="qtyRow"><td><input type="text" name="item"
value="" placeholder="Item"></td><td><select class="country"
name="what"><option value="Select Part">Select Part</option><option
value="1">Part 1</option><option value="2">Part 2</option><option
value="3">Part 3</option><option value="4">Part 4</option><option
value="5">Part 5</option></select></td><td><input type="text"
name="qty" value="" placeholder="Quantity"></td></tr>';
In your example there are two rows by default. These should also have the qtyRow class.
You can get the amoutn of rows by this and add 1 for the new qtyRow:
var number = $("tr.qtyRow").length + 1;
Now you need to change name="qty" to name="qtyn" where is the new number from the codeline above. Inside your $(".add-row").click() listener you need to add after the declaration of markup:
var number = $("tr.qtyRow").length + 1;
markup = markup.peplace('name="qty"', 'name="qty' + number + '"');
Please let me know if this works for you :)

It would be better to have a specified CSS class for input row and using that following could be one of the solution:
// Get all rows
// Note: expecting input row having class 'inputRow'
var allRows = $('table tr.inputRow');
// Set proper value to 'name' attribute
allRows.last().find('input[name=item]').attr('name', 'item' + allRows.length);
HTML table tag also requires a fix:
<table>
<tbody>
<!-- data rows goes here -->
</tbody>
<tfoot>
<!-- save button row goes here-->
</tfoot>
</table>
$(document).ready(function() {
$(".add-row").click(function() {
var markup = '<tr class="inputRow"><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty" value="" placeholder="Quantity"></td></tr>';
$("table > tbody").append(markup);
// Get all rows
// Note: expecting input row having class 'inputRow'
var allRows = $('table tr.inputRow');
// Set proper value to 'name' attribute
allRows.last().find('input[name=item]').attr('name', 'item' + allRows.length);
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="post">
<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
<tbody>
<tr>
<td colspan="3">
<input type="text" name="customer" value="" placeholder="Customer Name">
</td>
</tr>
<tr>
<th>Item</th>
<th>Service</th>
<th>Qty</th>
</tr>
<tr class="inputRow">
<td><input type="text" name="item1" value="" placeholder="Item"></td>
<td><select class="country" name="what1">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty" value="" placeholder="Quantity"></td>
</tr>
<tr class="inputRow">
<td><input type="text" name="item2" value="" placeholder="Item"></td>
<td><select class="country" name="what2">
<option value="Select Part">Select Part</option>
<option value="1">Part 1</option>
<option value="2">Part 2</option>
<option value="3">Part 3</option>
<option value="4">Part 4</option>
<option value="5">Part 5</option>
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</td>
</tr>
</tfoot>
</table>
<input type="button" class="add-row" value="Add Row">
</form>

Binding duplicate events by using clone()

i already duplicate my html elements by this javascript code but i cannot copy the events of the code.Will you gyups please prove me the possible solution.
<script type = "text/javascript" language = "javascript">
function func_addmore(){
$(document).ready(function() {
$("div").click(function () {
$(this).clone().insertAfter(this);
});
});
}
</script>
<body id="show" onload="func_load()">
<form method="POST" action="get_value.php" >
<table class="table table-condensed">
<tr>
<td width="1%"><span> Level of Education:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">Masters</option>
<option id="2">Bachelors</option>
<option id="3">HSC</option>
<option id="4">SSC</option>
</select>
</td>
</tr>
<tr>
<td ><span>Exam/Degee Title:</span></td>
<td ><input name="degreetitle" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<tr>
<td><span>Concentration/Major:</span></td>
<td><input name="major" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td><span>Institutions:</span></td>
<td>
<select id="institutions" name="institutions" onchange="func_ins()">
<option value="none" selected >----Select ----</option>
<option id="1">A</option>
<option id="2">Others</option>
</select>
</td>
</tr>
<tr id ="trins">
<td><span>Others</span></td>
<td><input type="text" id="others_ins" /></td>
</tr>
<tr>
<td><span>Result:</span></td>
<td>
<select id="result" name="result" onchange="func_res()">
<option value="none" selected >----Select ----</option>
<option id="1">Grade</option>
<option id="2" >Division</option>
</select>
</td>
</tr>
<tr id ="trgrade">
<td><span>Grade</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id ="trscale">
<td><span>Scale:</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id="trdiv" onload="func_hid()" >
<td><span>Division:</span></td>
<td>
<select id="division" name="division">
<option value="none" selected >----Select ----</option>
<option id="1">1st Division</option>
<option id="2">2nd Division</option>
</select>
</td>
</tr>
<tr>
<td width="1%"><span> Year of Passing:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">2016</option>
<option id="2">2015</option>
<option id="3">2014</option>
<option id="4">2013</option>
<option id="5">2012</option>
<option id="6">2011</option>
<option id="7">2010</option>
<option id="1">2009</option>
<option id="2">2008</option>
<option id="3">2007</option>
<option id="4">2006</option>
<option id="5">2005</option>
<option id="6">2004</option>
<option id="7">2003</option>
<option id="1">2002</option>
<option id="2">2001</option>
<option id="3">2000</option>
<option id="4">1999</option>
<option id="5">1998</option>
<option id="6">1997</option>
<option id="7">1996</option>
<option id="1">1995</option>
<option id="2">1994</option>
<option id="3">1993</option>
<option id="4">1992</option>
<option id="5">1991</option>
<option id="6">1990</option>
<option id="7">1989</option>
<option id="2">1988</option>
<option id="3">1987</option>
<option id="4">1986</option>
<option id="5">1985</option>
<option id="6">1984</option>
<option id="7">1983</option>
<option id="5">1982</option>
<option id="6">1981</option>
<option id="7">1980</option>
</select>
</td>
</tr>
<tr>
<td ><span>Duration:</span></td>
<td ><input name="duration" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td ><span>Achievement:</span></td>
<td ><input name="achievement" type="text" id="name" size="19" class=""/></td>
</tr>
<tr><td> <input type="submit" name="submit" value="submit" />
</td></tr>
<tr><td> <input type="button" name="addmore" value="Add more" onclick="func_addmore()" />
</td></tr>
</table>
</div>
</form>
</body>
Is there any way to do that? Thanks in advance.I hope i will find out my answer through you guys.Thank you.

The jQuery .clone() method offers the option to also clone events. Please note that by default this option is not used. In order to clone events you need to use:
$(this).clone(true).insertAfter(this);
More detail at jQuery.clone()

I want to note that the .clone() method in jQuery only clones DOM elements. In order to clone JavaScript objects, you would do:
// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
More information can be found in the jQuery documentation.
I also want to note that the deep copy is actually much smarter than what is shown above – it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.

copy of the table after user changes some inputs

I have table with some input fields where user can enter the inputs in it.once user enters and click on Add button.copy has to be done with user input fields.
I want to show exact copy of the table after user changes the fields by clicking on button.
function duplicate(val)
{
var editTable=$('#editable').html()
var totalGarments=$('#totalGarments').val()
test = parseInt(totalGarments)+1
$('#totalGarments').val(test)
var testVal=$('#totalGarments').val()
var duplicatVal= parseInt(val)+1
var selectOtmGarmentsHtml=$('#otmgarments'+val).html()
var selectOtmColorsHtml=$('#otmcolors'+val).html()
var selectOtmSizeHtml=$('#otmsize'+val).html()
$('#editable'+val).after("<table cellpadding='0' cellspacing='0' border='0' class='table table-striped table-bordered' id='editable"+testVal+"'><thead><tr><td>Garments</td><td>Color</td><td>Size</td> <td>Quantity</td> <td><span onclick='addNew("+testVal+")' class='btn btn-sm block btn-success'>Add</span></td> </tr> <tbody> <tr><td><select class='form-control' name='otmgarments[]' id='otmgarments"+testVal+"'>"+selectOtmGarmentsHtml +"</select></td> <td><select class='form-control' name='otmcolors[]' id='otmcolors"+testVal+"'>"+selectOtmColorsHtml +"</select> </td> <td><select class='form-control' name='otmsize[]' id='otmsize"+testVal+"'>"+selectOtmSizeHtml +"</select> </td> <td> <input type='text' value='' name='otmquantity[]' id='otmquantity"+duplicatVal+"' class='form-control'></td> <td><span onclick='duplicate("+testVal+")' class='btn block btn-sm btn-danger'>Duplicate</span></td></tr> </tbody> </table>")
var garmentSearch=$('#otmgarments'+val).val()
var colorSearch=$('#otmcolors'+val).val()
var sizeSearch=$('#otmsize'+val).val()
var quantityValue=$('#otmquantity'+val).val()
$('#otmgarments'+duplicatVal+' option[value='+garmentSearch+']').attr('selected',true);
$('#otmcolors'+duplicatVal+' option[value='+colorSearch+']').attr('selected',true);
$('#otmsize'+duplicatVal+' option[value='+sizeSearch+']').attr('selected',true);
$('#otmquantity'+duplicatVal).val(quantityValue)
}
<div class="form-group" >
<label class="col-sm-2 control-label">Quantity</label>
<div class="col-sm-10">
<input type="text" name="totalGarments" id="totalGarments" value="1">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="editable1">
<thead>
<tr>
<td>Garments</td>
<td>Color</td>
<td>Size</td>
<td>Quantity</td>
<td><span onclick='addNew(1)' class="btn btn-sm block btn-success">Add</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control" name="otmgarments[]" id="otmgarments1" >
<option value="AZ">Shirt</option>
<option value="CO">Pant</option>
<option value="ID">T-Shirt</option>
<option value="MT">Sports Wear</option>
<option value="NE">Jeans</option>
</select>
</td>
<td>
<select class="form-control" name="otmcolors[]" id="otmcolors1">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="White">White</option>
<option value="Purple">Purple</option>
<option value="Green">Green</option>
</select>
</td>
<td>
<select class="form-control" name="otmsize[]" id="otmsize1">
<option value='xs'>XS</option>
<option value='s'>S</option>
<option value='m'>M</option>
<option value='l'>L</option>
<option value='xl'>XL</option>
<option value='xxl'>XXL</option>
</select>
</td>
<td><input type="text" value="1500" name="otmquantity[]" id="otmquantity1" class="form-control" ></td>
<td><span id="tab1" onclick="duplicate(1)" class="btn block btn-sm btn-danger">Duplicate</span></td>
</tr>
</tbody>
</table>
</div>
</div>