Develop Reference

append form rows using JS

Hello I have an HTML form and want to be able to add or delete rows dynamically.
ie just by a click on an Icon or a text the entire form row should be duplicated and by clicking on a text or icon the duplicated row should be deleted.
I know JavaScript append can solve this but I don't know how to implement it since my my HTML has needed php tags in them.
the drop-downs options are getting it values from a db and some other input fields are also getting it's values from a db hence the reason I have PHP tags in there.
Below is the attached code.
Kindly help me with how I can append the row with the appended form working just like the parent row
<div class="col-xl-8 col-md-12">
<form>
<div class="card">
<div class="card-header">
<h3 class="card-title"><strong class="text-success" style="cursor: pointer;"><?=ucwords($clientName)?></strong> REP'S INFORMATION</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Reps Name<span class="text-red">*</span></label>
<input type="text" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">E-Mail<span class="text-red">*</span></label>
<input type="email" name="" class="form-control" required="">
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="form-group">
<label class="form-label">Phone No.<span class="text-red">*</span></label>
<input type="text text-dark" class="form-control" name="client_contact2" required="" id="client_contact2" onkeypress="return restrictAlphabets(event)" onpaste="return false;" ondrop="return false;" autocomplete="off" required="">
<input type="date" name="" value="<?=date("Y-m-d")?>" hidden="">
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">ADD DEVICE(S) INFORMATION</h3>
</div>
<div class="card-body">
<?php
if ($clientType === $slaClient) {
?>
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th class="text-center" >Device Brand</th>
<th class="text-center">Device Model</th>
<th class="text-center">Serial Number</th>
<th class="text-center" style="width:10%">SLA Device</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td>
<select class="form-control form-select brand" data-bs-placeholder="Select" name="brand[]" required="" id="brand" onchange="checkDeviceStatus()">
<?php
$readALL = "SELECT * FROM productbrands WHERE deleted = 0";
$displayAll = mysqli_query($conn,$readALL);
while($rowFetchAll = mysqli_fetch_array($displayAll)){
$brandName = $rowFetchAll['brandName'];
$brandid = $rowFetchAll['brandID'];
?>
<option value="<?=$brandid?>"><?=$brandName?></option>
<?php } ?>
</select>
</td>
<td>
<select class="form-control form-select model" data-bs-placeholder="Select" name="model[]" required="" id="model" onchange="checkDeviceStatus()">
<?php
$readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
$displayAll1 = mysqli_query($conn,$readALL1);
while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
$modelName = $rowFetchAll1['modelName'];
$modelid = $rowFetchAll1['modelID'];
?>
<option value="<?=$modelid?>"><?=$modelName?></option>
<?php } ?>
</select>
</td>
<td><input type="text" name="serialNo" class="form-control serialNo" id="serialNo" onchange="checkDeviceStatus()"></td>
<!-- The input field below is to get value from AJAX -->
<td><input type="text" name="deviceLevel" class="form-control" readonly="" id="deviceLevel">
<!-- End of Input field -->
</td>
<input type="text" name="" id="client" value="<?=$clientID?>" hidden="" class="client">
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
<?php
if ($clientType === $nonSla) {
?>
<table class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th>Product Model Non-SLA</th>
<th>Serial Number Non-SLA</th>
<th>Device Status Non-SLA</th>
<th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
</tr>
</thead>
<tbody class="field_wrapper " id="table_body">
<tr>
<td><input type="text" name="" class="form-control" ></td>
<td><input type="text" name="" class="form-control"></td>
<td><input type="text" name="" class="form-control"></td>
<td><button type="button" class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle" style="font-size:1.6em;"></i></button></td>
</tr>
</tbody>
</table>
<?php } ?>
</div>
</div>
</form>
</div>

Here is basic example:
const table_row_html = `
<tr>
<th scope="row">{{ROW_NO}}</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]"">
<option selected>Open this select menu</option>
<option value=" 1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete" href="#">Remove</a></td>
</tr>`;
$(document).on("click", ".table a.insert", function() {
const table_body = $(this).closest(".table").find("tbody");
table_body.append(
table_row_html.replace("{{ROW_NO}}", table_body.children("tr").length + 1)
);
return false;
});
$(document).on("click", ".table a.delete", function() {
$(this).closest("tr").remove();
return false;
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">
<a class="btn btn-primary insert" href="#">Add</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>
<select class="form-select" name="modal[]" ">
<option selected>Open this select menu</option>
<option value=" 1 ">One</option>
<option value="2 ">Two</option>
<option value="3 ">Three</option>
</select>
</td>
<td>#mdo</td>
<td><a class="btn btn-danger btn-sm delete " href="# ">Remove</a></td>
</tr>
</tbody>
</table>
</div>

How do I fill a cell in the table dynamically?

How do I fill a cell in the table dynamically after the user selects an option within the column?
Inside the select there is an update function and it is working, but I can't update column two of the line with the data given value of the select.
function update(line) {
// update in the col of mytable for next col.
// whats wrong with this code?
// Why not working?
var td = line.closest('td');
td.nextSibling.innerText = line.value;
}
<table id="myTable">
<thead>
<tr>
<td>Selection</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td id='emilio'>
1
</td>
</tr>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td>
2
</td>
</tr>
</tbody>
</table>

Since the onChange is working, you need to select the containing td then update then next one like:
function onChange(update) {
var td = update.closest('td');
td.nextElementSibling.innerText = update.value;
}

Your function name should be update, try this
function update(e) {
//update in the col of mytable for 0
if( e.id ==='item1'){
document.getElementById('selection1').innerHTML= e.value
}else{
document.getElementById('selection2').innerHTML= e.value
}
}
<table id="myTable">
<thead>
<tr>
<td>Selection</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='1'>option1</option>
<option value='2'>option2</option>
<option value='3'>option3</option>
<option value='4'>option4</option>
</select>
</div>
</td>
<td id='selection1'>
1
</td>
</tr>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item2" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td id='selection2' ></td>
</tr>
</tbody>
</table>

jquery select option by text not working properly

In my code there are three select elements (one for each file) with 3 or 4 options each. I have added one Apply All button on the row having first file.
If an user selects the sheet name on the first file and clicks on Apply All button, it has to select same sheets on all the files. If the sheet was missing on anyone of the files, it has to show an alert like "mismatched sheets". Here is what I tried,
<form method="post" id="sheetForm" action="#"><input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="col-sm-12">
<div class="m-b-15">
</div>
</div>
</div>
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline">By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="select1" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2">Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="select2" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected">Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2" >2</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="select3" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1" >1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</form>
and the relevant js code looks like,
$('#btnApplyAll').on('click', function(){
// get the selected option of first select
var noSuchOption = false;
var selectedOption = $('#select1').find(":selected").text();
var selects = $('select[name="sheet-select"]');
$('select[name="sheet-select"] option[selected="selected"]').removeAttr('selected');
$.each(selects, function(index, select) {
var opts = $(select).find('option').filter(function(){ return this.text == selectedOption;});
if(opts.length < 1) {
noSuchOption = true;
return false;
}
});
if(noSuchOption) {
notify_long("Selected sheet doesn't exists in all files!", 'danger');
} else {
$('select[name="sheet-select"] option').filter(function(){
return this.text == selectedOption;
}).attr('selected', true);
}
});
This piece of code works on the initial stage of 3 or 4 button clicks but if I click on apply all button after choosing sheet1 on file1, sheet2 on file2, sheet1 on file3 at the middle stage, it fails to change. On that time, switching between radio buttons also fails to display the relevant option.
jsFiddle

This could meet your requirements:
$('#btnApplyAll').on('click', function(){
var noSuchOption = false;
var selectedOption = null;
$('select.sheet-select').each(function(index) {
if (noSuchOption) return;
if (index == 0) {
selectedOption = $(this).val();
return;
}
if ($(this).find('option[value="' + selectedOption + '"]').length === 0) {
noSuchOption = true;
alert("File: "+$(this).parent().prev().val() +" have not selected sheet", 'danger');
return;
}
$(this).val(selectedOption);
})
});
function toggleOptions(e) {
var toggle = $(this).attr('id') == 'inlineRadio1' ? 'name' : 'index';
$('select.sheet-select option').hide()
$('select.sheet-select').each(function() {
let optsToShow = $(this).find('option[value^="'+ toggle +'"]');
optsToShow.show();
$(this).val(optsToShow.first().attr('value'));
});
}
$('#inlineRadio1, #inlineRadio2')
.change(toggleOptions)
.first().change(); // trigger change to initialize
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sheetForm" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="select1" class="form-control input-small sheet-select" name="sheet-select-feb">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2">Sheet2</option>
<option value="index 2">2</option>
<option value="name 3">Sheet3</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="select2" class="form-control input-small sheet-select" name="sheet-select-jan">
<option value="name 1" selected="selected">Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2" >2</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="select3" class="form-control input-small sheet-select" name="sheet-select-mar">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</form>

$(document).ready(function() {
// Default select mode of sheet
$(".rdoSelection[value='byName']").prop("checked", true);
function selectCheckboxstatus() {
var selectionMode;
$(".clsDdPosition").prop("selectedIndex", 0);
$(".clsDdName").prop("selectedIndex", 0);
selectionMode = $(".rdoSelection:checked").val();
if ("byName" === selectionMode) {
$(".clsDdPosition").hide();
$(".clsDdName").show();
} else if ("byPosition" === selectionMode) {
$(".clsDdPosition").show();
$(".clsDdName").hide();
}
}
selectCheckboxstatus();
$(".rdoSelection").on("click", function(e) {
selectCheckboxstatus();
});
$(".btnApplyAll").on("click", function(e) {
var selectedValue, selectedClass, ddSelectionMode;
ddSelectionMode = $(".rdoSelection:checked").val(); if ("byName" === ddSelectionMode) {
selectedValue = $("#ddSheetByName1").val();
selectedClass = ".clsDdName";
} else if ("byPosition" === ddSelectionMode) {
selectedValue = $("#ddSheetByPosition1").val();
selectedClass = ".clsDdPosition";
}
$(selectedClass).each(function() {
$(this).val(selectedValue);
});
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sheetForm" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="col-sm-12">
<div class="m-b-15">
</div>
</div>
</div>
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="byName" name="radioInline" class="rdoSelection">By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="byPosition" name="radioInline" class="rdoSelection">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="ddSheetByName1" class="form-control input-small ddSheetByName1 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition1" class="form-control input-small ddSheetByPosition1 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle btnApplyAll" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="ddSheetByName2" class="form-control input-small ddSheetByName2 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition2" class="form-control input-small ddSheetByPosition2 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="ddSheetByName3" class="form-control input-small ddSheetByName3 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition3" class="form-control input-small ddSheetByPosition3 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</form>

My dynamic table row creation code doesn't work

I want to create a dynamic table. This code was working fine for me until I had Text box instead of this combo box in "Recruitment stage " column
I have used help of this code snippet http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion
So my problem is I can't add rows after changing above mentioned code snippet into below code.
So please some one tell me why this isn't working?
This is screenshot of my table https://scontent-b-sin.xx.fbcdn.net/hphotos-xap1/v/l/t1.0-9/p118x118/1920631_767832533264997_3927859617455363653_n.jpg?oh=11445485fb638f37534179b6ed2eaaf4&oe=5509770D
Quick reply would be appreciated
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td>
<select name='course"+i+"' class='form-control'>
<option value=''>Select</option>
<option value='1'>Telephonic Interview</option>
<option value='2'>Skype Interview</option>
<option value='3'>Personal Interview</option>
</select>
</td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' 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--;
}
});
});
<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">
#
</th>
<th class="text-center">
Recruitment Stage
</th>
<th class="text-center">
Remark
</th>
<th class="text-center">
Comments
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select name="course0" class="form-control">
<option value="">Select</option>
<option value="1">Telephonic Interview</option>
<option value="2">Skype Interview</option>
<option value="3">Personal Interview</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

If you have multiple lines for a single statement in javascript you should use " at the end of each line and + " at the beginning of the next line (or vice versa). This is called concatenation
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td>"
+"<select name='course"+i+"' class='form-control'>"
+"<option value=''>Select</option>"
+"<option value='1'>Telephonic Interview</option>"
+"<option value='2'>Skype Interview</option>"
+"<option value='3'>Personal Interview</option>"
+"</select>"
+"</td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' 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--;
}
});
});
#add_row, #delete_row
{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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">
#
</th>
<th class="text-center">
Recruitment Stage
</th>
<th class="text-center">
Remark
</th>
<th class="text-center">
Comments
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select name="course0" class="form-control">
<option value="">Select</option>
<option value="1">Telephonic Interview</option>
<option value="2">Skype Interview</option>
<option value="3">Personal Interview</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

How to get specific HTML control from a <table><tr><td></td></tr></table> and append the selected control to the same <td>?

I've following table in HTML:
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td>
<div class="btn-group">
<select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
</div>
</td>
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[1]" id="units_1" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td colspan="5"></td>
</tr>
</tfoot>
</table>
Now I've to append the
<select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
to the <td> in which it is present currently on the click of Add button. Previously the functionality was of adding the entire row with <select></select> in first <td> of a new <tr> but now the requirement is to append the <select></select> to the existing <td> only. My previous code is as follows:
$(document).delegate('.products','click',function (e) {
var table_id = $(this).closest('table').attr('id');
var no = table_id.match(/\d+/)[0];
var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
var new_row = $('#'+first_row).clone();
var tbody = $('#' + table_id + ' tbody');
var n = $('tr', tbody).length + 1;
new_row.attr('id', 'reb' + no +'_'+ n);
$(':input', new_row).not('.prod_list').remove();
$('select', new_row).attr('name','product_id_'+no+'['+n+']');
$('select', new_row).attr('id','product_id_'+no+'_'+n);
$('<button style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">×</button>').appendTo( $(new_row.find('td:first')) );
tbody.append(new_row);
$(new_row).children('td').not('td:eq(0)').remove();
});
But please note that the id and name of the <select></select> to be appended should be in same fashion as of my previous functionality. You can refer above code for it. Thanks in advance.

you can try this below javascript code,
var count = 1;
$('#blacklistgrid_1').on('click', '.products', function () {
var n = $('.pro:last').attr('name').match(/\[(.*?)\]/);
var newName = $('.pro:last').attr('name').replace(/\[(.*?)\]/, '[' + (+n[1] + 1) + ']');
var newID = $('.pro:last').attr('id').replace(/[^_]*$/, +n[1] + 1);
var toCloneDiv = $('.selectControls:last').clone();
var clonedDiv = $(toCloneDiv).appendTo('#reb1_1 > td:nth-child(1)');
//add delete button
if (count == 1) $('<button style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">×</button>').appendTo(clonedDiv);
count++;
$(clonedDiv).find('.pro').attr({
'id': newID,
'name': newName
});
});
// to remove select element
$('#blacklistgrid_1').on('click','.close', function(){
$(this).closest('div').remove();
});
SEE THIS FIDDLE DEMO