Develop Reference

Typehead JS is not working on multiple inputs with same classes

The problem I'm facing is related with Invoicing system. There is one row exists by default but if there are more than one products then user can Add New Item which adds the new row with jQuery append function.
Invoicing system has few Inputs one of them is Item Name which autocomplete by Typehead JS.
Code of Predefined Row
<tbody id="TableBody">
<tr>
<td style="width: 220px">
<input type="text" class="form-control Item" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
</td>
<td>
<input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
</td>
<td>
<input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
</td>
<td>
<input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
</td>
<td>
<input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
</td>
<td>
<button type="button" class="btn btn-danger DelRow">Delete</button>
</td>
</tr>
</tbody>
Code to Add new Row
$('#AddNewItem').click(function() { $('#TableBody').append(`
<tr>
<td style='width: 220px'>
<input type='text' class='form-control Item' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
</td>
<td>
<input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
</td>
<td>
<input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
</td>
<td>
<input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
</td>
<td>
<input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
</td>
<td>
<button type="button" class="btn btn-danger DelRow">Delete</button>
</td>
</tr>
`); });
Code to show Auto suggestions
$(document).ready(function() {
$('.Item').typeahead({
source: function (query, process) {
return $.get('FetchItem.php?Item', { query: query }, function (data) {
data = $.parseJSON(data);
return process(data);
});
},
});
});
I just wanted to show suggestions on all the additional appended fields.
Any help would be much appreciated, Thank you
Screenshot

Afterall, I got the solution to my answer.
I was using jQuery document load function which was not working on the appended rows.
So instead of $(document).ready(function() { I just used $('.TableBody').on("click", ".Item", function() { and it worked.

how to hide input fields on radio button selection

I have four radio buttons (fixed,percentage,monthly,yearly), two buttons have common fields and other two have common fields. I created two divs one for fixed and percentage and other for monthly and yearly with add more button. The problem is when I enter data for monthly div (with multiple rows), I get the data but the 0th position is blank which gets stored in the database as 0. The solution for this is to have only one div and based on the radio button I just need to hide and show fields, that's what I want.
HTML Code for labels
<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
<div class="col-lg-10" required>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="2">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Monthly</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="3">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Yearly</span>
</label>
</div>
Html code for fixed/percentage div
<div id="fixPerDiv" style="display:block;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id = 'commision_tbl' >
<tr>
<td width = '20%'>Start price</td>
<td width = '20%'>End price</td>
<td width = '20%'>Start date</td>
<td width = '20%'>End date</td>
<td width = '20%'>Comission</td>
<td> </td>
</tr>
<tr>
<td><input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" /></td>
<td><input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required"/></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><input type="number" name="commissions_amount[]" class="form-control" value="" placeholder="Commision price" required="required"/></td>
<td> </td>
</tr>
<tr>
<td colspan="6" align = "center">
<input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Html for monthly/fixed div
<div id="monYearDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id = 'commision_tb2' >
<tr>
<td width = '30%'>Start date</td>
<td width = '30%'>End date</td>
<td width = '30%'>Comission</td>
<td> </td>
</tr>
<tr>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><div class="input-with-icon"><input type="text" data-provide="datepicker" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required"/><span class="icon icon-calendar input-icon"></span></div></td>
<td><input type="number" name="commissions_amount[]" class="form-control" placeholder="Commision price" required="required"/></td>
<td> </td>
</tr>
<tr>
<td colspan="4" align = "center">
<input type="button" value="Add More" id="price_addmore" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Jquery code:
<script>
$(document).ready(function() {
console.log('called');
$('input[type=radio][name=comission_type]').change(function() {
if (this.value == '0' || this.value == '1') {
$("#fixPerDiv").css("display","block");
$("#monYearDiv").css("display","none");
}
else if (this.value == '2' || this.value == '3') {
$("#fixPerDiv").css("display","none");
$("#monYearDiv").css("display","block");
}
});
});
</script>

So you're trying to use the value to toggle? Well, when you're getting the value, you're using this.value -- I've changed that to using jQuery's $(this).val()
Also, rather than using the ifs that you're using, I used a switch case -- easier on my old eyes.
If these aren't quite what you're looking for, let me know. I'll edit the javascript depending on your comments if you need.
So, in examining your comment, I realized that I'd totally missed the problem. What you might want to consider is to create EACH form as a separate entity -- the problem you're encountering happens when you have multiple fields with the same name (as start_date and end_date which appear when either form is displayed).
I've edited the demo to create each toggled element as its own form, and in this iteration, when you click the 'add more' button, it's simply logging the serialized form data to the console, so as to show that you aren't getting empty form data in the serialized stream.
Hope this helps!
$(document).ready(function() {
$('input[type=radio][name=comission_type]').on("change", function() {
toggleDivs($(this).val())
});
$("input[type='button']" ).on("click", function(){
console.log($(this).parents("form").serialize() );
})
function toggleDivs(toggleVal) {
console.log(toggleVal)
switch (toggleVal) {
case '0':
case '1':
$("#fixPerDiv").show();
$("#monYearDiv").hide();
break;
case '2':
case '3':
$("#fixPerDiv").hide();
$("#monYearDiv").show();
break;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-sm-2 control-label" for="radioo">Commission type <b style="color:red;">*</b></label>
<div class="col-lg-10" required>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="0" checked="checked">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Fixed price</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="1">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Percentage wise</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="2">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Monthly</span>
</label>
<label class="custom-control custom-control-primary custom-radio">
<input class="custom-control-input" type="radio" name="comission_type" value="3">
<span class="custom-control-indicator"></span>
<span class="custom-control-label">Yearly</span>
</label>
</div>
<form name="fixedForm">
<div id="fixPerDiv" style="display:block;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='commision_tbl'>
<tr>
<td width='20%'>Start price</td>
<td width='20%'>End price</td>
<td width='20%'>Start date</td>
<td width='20%'>End date</td>
<td width='20%'>Comission</td>
<td> </td>
</tr>
<tr>
<td>
<input type="number" name="commissions_start_price[]" class="form-control" value="" placeholder="Start Price" required="required" />
</td>
<td>
<input type="number" name="commissions_end_price[]" class="form-control" value="" placeholder="End Price" required="required" />
</td>
<td>
<div class="input-with-icon">
<input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required" /><span class="icon icon-calendar input-icon"></span></div>
</td>
<td>
<div class="input-with-icon">
<input type="text" data-provide="datepicker" value="" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required" /><span class="icon icon-calendar input-icon"></span></div>
</td>
<td>
<input type="number" name="commissions_amount[]" class="form-control" value="" placeholder="Commision price" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="6" align="center">
<input type="button" value="Add More" id="price_addmorebtn" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
<form name="monYearForm">
<div id="monYearDiv" style="display:none;">
<div class="form-group">
<div class="col-lg-11 col-lg-offset-1">
<div class="table-responsive">
<table class="table" id='commision_tb2'>
<tr>
<td width='30%'>Start date</td>
<td width='30%'>End date</td>
<td width='30%'>Comission</td>
<td> </td>
</tr>
<tr>
<td>
<div class="input-with-icon">
<input type="text" data-provide="datepicker" data-date-today-highlight="true" name="start_date[]" class="form-control" placeholder="Start date" required="required" /><span class="icon icon-calendar input-icon"></span></div>
</td>
<td>
<div class="input-with-icon">
<input type="text" data-provide="datepicker" data-date-today-highlight="true" name="end_date[]" class="form-control" placeholder="End date" required="required" /><span class="icon icon-calendar input-icon"></span></div>
</td>
<td>
<input type="number" name="commissions_amount[]" class="form-control" placeholder="Commision price" required="required" />
</td>
<td> </td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="button" value="Add More" id="price_addmore" class="btn btn-outline-info">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>

Submitting Dynamic Form Fields to mysql via PHP

I have created a dynamic form and I am trying to send the form data to mysql through PHP but its not working. Data is not getting sent even from the very first row without adding a dynamic row. I'm new to this topic, so I'm out of ideas to solve it. How can I make this form a correct one and send accurate data to mysql?
In my form I have 3 fields that are not dynamic.
Here is the form code:
<form name="newbillform" method="POST" action="save_purchase_details.php">
<table style=" border:1px solid black" cellpadding="5px" cellspacing="0px" align="center" border="0">
<tr>
<td colspan="4" style="background:#0066FF; color:#FFFFFF; fontsize:20px" align="center">
ADD NEW PURCHASE RECORD
</td>
</tr>
<tr>
<td>Date:</td>
<td>
<input type="date" name="p_date"/>
</td>
</tr>
<tr>
<td>Invoice Number:</td>
<td>
<input type="text" name="invoice_no" size="50">
</td>
</tr>
<tr>
<td>Balance:</td>
<td>
<input type="text" name="balance" size="50">
</td>
</tr>
</table>
<h2 style="padding-left:10px;">Enter Product Details Below:-</h2>
<table id="product_details" style="margin-top:8px;" align='center' border='1' width="900px">
<tr id="row1">
<td>
<input type="text" name="qty[]" value="" placeholder="Quantity" size="6">
</td>
<td>
<input type="text" name="pack[]" value="" placeholder="Pack" size="6">
</td>
<td>
<input type="text" name="item_name[]" value="" placeholder="Item Name" size="16">
</td>
<td>
<input type="text" name="batch[]" value="" placeholder="Batch" size="6">
</td>
<td>
<input type="text" name="expiry[]" value="" placeholder="Expiry" size="6">
</td>
<td>
<input type="text" name="mrp[]" value="" placeholder="M.R.P" size="6">
</td>
<td>
<input type="text" name="rate[]" value="" placeholder="Rate" size="6">
</td>
<td>
<input type="text" name="vat[]" value="" placeholder="VAT" size="6">
</td>
<td>
<input type="text" name="discount[]" value="" placeholder="Discount" size="6">
</td>
<td>
<input type="button" class="button-add-row" onclick="add_row();" value="ADD ROW" size="8">
</td>
</tr>
</table>
<center>
<input type="submit" name="submit_row" value="SUBMIT">
</center>
</form>
Here is the javascript code:
<script type="text/javascript">
function add_row()
{
$rowno = $("#product_details tr").length;
$rowno = $rowno + 1;
$("#product_details tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='qty[]' placeholder='Quantity' size='6'></td><td><input type='text' name='pack[]' placeholder='Pack' size='6'></td><td><input type='text' placeholder='Item Name' name='item_name[]' size='16'></td><td><input type='text' name='batch[]' placeholder='Batch' size='6'></td><td><input type='text' name='expiry[]' placeholder='Expiry' size='6'></td><td><input type='text' name='mrp[]' placeholder='M.R.P' size='6'></td><td><input type='text' name='rate[]' placeholder='Rate' size='6'></td><td><input type='text' name='vat[]' placeholder='VAT' size='6'></td><td><input type='text' name='discount[]' placeholder='Discount' size='6'></td><td><input type='button' class='button-add-row' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#'+rowno).remove();
}
</script>
Here is the PHP code:
<?php
$connect = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("store_records",$connect) or die(mysql_error());
if(isset($_POST['submit_row']))
{
$amount;
$grand_total;
for($i = 0; $i < count($_POST['item_name']); $i++)
{
$qty = $_POST['qty'][$i];
$p_date = $_POST['p_date'];
$invoice_no = $_POST['invoice_no'];
$balance = $_POST['balance'];
$pack = $_POST['pack'][$i];
$item_name = $_POST['item_name'][$i];
$batch = $_POST['batch'][$i];
$expiry = $_POST['expiry'][$i];
$mrp = $_POST['mrp'][$i];
$rate = $_POST['rate'][$i];
$vat = $_POST['vat'][$i];
$discount = $_POST['discount'][$i];
$amount = $balance+($qty*$rate)-$discount;
$grand_total = $amount+(($amount*$vat)/100);
$query =mysql_query("insert into bill_records values('', '$p_date', '$invoice_no', '$balance', '$qty','$pack','$item_name', '$batch', '$expiry', '$mrp', '$rate', '$vat', '$discount', '$amount', '$grand_total')");
}
}
?>
It would be of great help. Thank You..

Can I have a form_dropdown within a javascript?

Hi I am using codeigniter framework. I am having a javascript to to create a table row dynamically when I click a button.
I need to have a dropdown inside a table cell that is added dynamically. Here is the code I tried so far.
function displayResult() {
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['first_name']] = $row['first_name'];
}
?>
var something='<?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?>';
alert(something);
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td><div>'+something+'</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
When button is clicked I call this displayResult(). I am getting 2 errors in my console.
1.Uncaught SyntaxError: Unexpected token ILLEGAL
2.Uncaught ReferenceError: displayResult is not defined
Can someone help me? Please help me fix this code.
function displayResult() { <? php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach($employee as $row) {
$options_employee[$row['first_name']] = $row['first_name'];
}
?>
var something = '<?php echo form_dropdown('
employee ', $options_employee, set_value('
employee[]
'), '
class = "span2"
');?>';
alert(something);
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td><div>' + something + '</div></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
<div id="form">
<!-- div form starts here.its for add table -->
<table id="test">
<thead>
<tr>
<td style="width:80px;">
employee
</td>
<td style="width:35px;">
start time
</td>
<td style="width:35px;">
id
</td>
<td style="width:145px;">
Description
</td>
<td style="width:45px;">
Type
</td>
<td style="width:45px;">
qty prch
</td>
<td style="width:45px;">
qty used
</td>
<td style="width:70px;">
Price
</td>
<td style="width:70px;">
discount
<td style="width:70px;">
Tax
</td>
<td style="width:70px;">
Total
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php echo form_dropdown( 'employee', $options_employee, set_value( 'employee[]'), 'class="span2"');?>
</td>
<td>
<input type="text" name="start_time[]" value="" style="width:35px;" />
</td>
<td>
<input type="text" name="pid[]" value="" style="width:35px;" />
</td>
<td>
<input type="text" name="description[]" class="description" value="" style="width:145px;" />
</td>
<td>
<input type="text" name="type[]" class="type" style="width:45px;" />
</td>
<td>
<input type="text" name="qty_prch[]" class="qty_prch" style="width:45px;" />
</td>
<td>
<input type="text" name="qty_used[]" class="qty_used" style="width:45px;" />
</td>
<td>
<input type="text" name="price[]" class="price" style="width:70px;" />
</td>
<td>
<input type="text" name="discount[]" class="discount" style="width:70px;" />
</td>
<td>
<input type="text" name="tax[]" class="tax" style="width:70px;" />
</td>
<td>
<input type="text" name="total[]" class="total" style="width:70px;" />
</td>
</tr>
</tbody>
</table>
<div id="add_row">
<button onClick="displayResult()" class="add_r"></button>
</div>

This works fine for me. Thank you all for your support !!
function displayResult() {
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['first_name']] = $row['first_name'];
}
$dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');
?>
var complex = <?php echo json_encode($dropdown); ?>;
var row = document.getElementById("test").insertRow(-1);
row.innerHTML =
'<td><div>'+complex+'</div></td>'+
'<td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>'+
'<td><input type="text" name="pid[]" style="width:35px;"/></td>'+
'<td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>'+
'<td><input type="text" class="type" value="" style="width:45px;"/></td>'+
'<td><input type="text" class="qty_prch" value="" style="width:45px;"/></td>'+
'<td><input type="text" class="qty_used" value="" style="width:45px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>'+
'<td><input type="text" value="" style="width:70px;"/></td>';
}

Change your single ' to double "
your code is var something='<?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?>';
because when javascript start reading this line
var something='<?php echo form_dropdown('employee' it seems statement end here ('e near ' after dropdown('
you should use something like that
var something='<?php echo form_dropdown("employee", $options_employee, set_value("employee[]"), \'class="span2"\');?>';
sorry for my bad english

In your code Snippet on the first line :
function displayResult() { <? php
there is a space between <? and php
Remove that and retry.

How to add new table row?

I am trying to create new rows when a checkbox is clicked. I have tried using .after() and .insertAfter() to no avail.
Can someone please point me in the right direction?
http://jsfiddle.net/uf0jhd9w/c
HTML:
<tr class="itemSize">
<td>
<span class="danger">*</span><label for="itemSize">Product Sizes:</label>
</td>
<td>
<label for="extra_small">XS</label><input type="checkbox" name="extra_small" id="extra_small" value="XS">
<label for="small">S</label><input type="checkbox" name="small" id="small" value="S">
<label for="medium">M</label><input type="checkbox" name="medium" id="medium" value="M">
<label for="large">L</label><input type="checkbox" name="large" id="large" value="L">
</td>
</tr>
jQuery:
$('#extra_small,#small,#medium, #large, #extra_large').on('change',function(){
var $sizeTr = $('.itemSize');
if(this.checked){
console.log("checked");
var size = $(this).attr("id");
var html =
'<tr class="'+size+'_quantity">'+
'<td>'+
'<span class="danger">*</span><label for="itemQuantity">'+size+' Stock Quantity:</label>'+
'</td>'+
'<td>'+
'<input type="number" min="1" name="itemQuantity" placeholder="Enter Product Quantity" value=""/>'+
'</td>'+
'</tr>';
//$('.itemSize').after(html);
$(html).insertAfter($sizeTr);
//console.log( $(html));
}else{
$('tr.'+size+'_quantity').hide();
}
});

Got your answer.
Please refer this Fiddle: http://jsfiddle.net/mayurRahul/frpnsnpv/
HTML:
<tr class="itemSize">
<td>
<span class="danger">*</span><label class="itemSize">Product Sizes:</label>
</td>
<td>
<label for="extra_small">XS</label><input type="checkbox" name="extra_small" id="extra_small" value="XS">
<label for="small">S</label><input type="checkbox" name="small" id="small" value="S">
<label for="medium">M</label><input type="checkbox" name="medium" id="medium" value="M">
<label for="large">L</label><input type="checkbox" name="large" id="large" value="L">
</td>
</tr>
JavaScript:
$('#extra_small,#small,#medium, #large, #extra_large').on('change',function(){
var $sizeTr = $('.itemSize');
if(this.checked){
console.log("checked");
var size = $(this).attr("id");
var html =
'<tr class="'+size+'_quantity">'+
'<td>'+
'<span class="danger">*</span><label for="itemQuantity">'+size+' Stock Quantity:</label>'+
'</td>'+
'<td>'+
'<input type="number" min="1" name="itemQuantity" placeholder="Enter Product Quantity" value=""/>'+
'</td>'+
'</tr>';
//$('.itemSize').after(html);
$(html).insertAfter($sizeTr);
//console.log( $(html));
}else{
$('tr.'+size+'_quantity').hide();
}
});

Make sure you select the good element when you add your row (see answers from this link). Add an ID to your table.
<table id="myTable">
<thead>
<!-- Table headers -->
</thead>
<tbody>
<!-- Table contents -->
</tbody>
</table>
$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

To add row after last 'tr'
$("#table tr:last").after("<tr><td>cell</td></tr>");