JQuery Append form not posting in PHP - php

Question

I am trying to append table row which contains HTML form. The append form data not passing to controller. My Code is -
<form method="post" action="<?=base_url()?>controller/function_name">
<table class="table table-bordered tbsize tb_wp" id="">
<thead>
<tr >
<th class="firstrow">Item No.</th>
<th class="firstrow">Part No.</th>
<th class="firstrow">Qty</th>
<th class="firstrow">Price Quoted </th>
<th class="firstrow"> Notes </th>
<th class="firstrow">Internal Notes</th>
<th colspan="3" class="firstrow2">
<div class="pcrsec">
<div class="row"><span class="pcrsecbor">Perior Customer RFQ</span></div>
<div class="row">
<div class="pcrsec2">
<ul class="list-inline">
<li>Date</li>
<li>Cust No</li>
<li>Price</li>
</ul>
</div>
</div>
</div>
</th>
<th colspan="3" class="firstrow3">
<div class="pcrsec">
<div class="row"><span class="pcrsecbor">Perior Customer P/O</span></div>
<div class="row">
<div class="pcrsec2">
<ul class="list-inline">
<li>Date</li>
<li>Cust No</li>
<li>Price</li>
</ul>
</div>
</div>
</div>
</th>
<th colspan="3" class="firstrow4">
<div class="pcrsec">
<div class="row"><span class="pcrsecbor">Perior Vendor P/O</span></div>
<div class="row">
<div class="pcrsec2">
<ul class="list-inline">
<li>Date</li>
<li>Cust No</li>
<li>Price</li>
</ul>
</div>
</div>
</div>
</th>
<th class="firstrow">MU%</th>
<th></th>
</tr>
</thead>
<tbody id="what_i_do">
<tr>
<td><input type="text" name="item_no[]"></td>
<td colspan="3">
<table>
<tr>
<td><input type="text" class="smlbox" name="part_no[]" onblur="checkavailpart(this)"></td>
<td><input type="number" class="smlbox" name="qty[]"></td>
<td>
<input type="number" class="smlbox price_quotd_cls" name="price_quotd[]">
</td>
</tr>
<tr>
<td colspan="3"><input type="text" class="smlbox2" name="part_desc[]"></td>
</tr>
</table>
</td>
<td><input type="text" name="part_note[]"></td>
<td><input type="text" name="part_internal_note[]"></td>
<td><input type="text" class="datepicker" name="pc_rfq_date[]"></td>
<td><input type="text" name="pc_rfq_cus_no[]"></td>
<td><input type="text" name="pc_rfq_price[]"></td>
<td><input type="text" class="datepicker" name="pc_po_date[]"></td>
<td><input type="text" name="pc_po_cus_no[]"></td>
<td><input type="text" name="pc_po_price[]"></td>
<td><input type="text" class="datepicker" name="pv_po_date[]"></td>
<td><input type="text" name="pv_po_cus_no[]"></td>
<td><input type="text" name="pv_po_price[]"></td>
<td><input type="text" name="mu_per[]" onblur="calculate_quote_rate(this)"></td>
<td><i class="fa fa-plus-circle fa-2x" onclick="what_i_do(this);"></i></td>
</tr>
</tbody>
</form>
And JQuery is:-
<script>
function what_i_do(that) {
initid++;
var objTo = document.getElementById('what_i_do');
var divtest = document.createElement("tr");
divtest.setAttribute("class", "removeclass" + initid);
divtest.setAttribute("id", "removeclass" + initid);
var rdiv = 'removeclass' + initid;
divtest.innerHTML = '<td><input type="text" name="item_no[]"></td><td colspan="3"> <table> <tr> <td><input type="text" class="smlbox" name="part_no[]" onblur="checkavailpart(this)"></td><td><input type="number" class="smlbox" name="qty[]"></td><td> <input type="number" class="smlbox price_quotd_cls" name="price_quotd[]"> </td></tr><tr> <td colspan="3"><input type="text" class="smlbox2" name="part_desc[]"></td></tr></table> </td><td><input type="text" name="part_note[]"></td><td><input type="text" name="part_internal_note[]"></td><td><input type="text" class="datepicker" name="pc_rfq_date[]"></td><td><input type="text" name="pc_rfq_cus_no[]"></td><td><input type="text" name="pc_rfq_price[]"></td><td><input type="text" class="datepicker" name="pc_po_date[]"></td><td><input type="text" name="pc_po_cus_no[]"></td><td><input type="text" name="pc_po_price[]"></td><td><input type="text" class="datepicker" name="pv_po_date[]"></td><td><input type="text" name="pv_po_cus_no[]"></td><td><input type="text" name="pv_po_price[]"></td><td><input type="text" name="mu_per[]" onblur="calculate_quote_rate(this)"></td><td><i class="fa fa-times-circle fa-2x" style="color:red" onclick="remove_education_fields(' + initid + ');"></i></td>';
objTo.appendChild(divtest);
}
</script>
When I am submitting the form I use to get only zero index data. I have tried to clone the table row but there also I am not getting the value of the form which have been appended by the JQuery.
Please Help me out of this Problem
Thank You in advance.

Answer 1

in your appended html :
divtest.innerHTML = '<td><input type="text" name="item_no[]"></td><td colspan="3"> <table> <tr> <td>.....
remove all spaces between tags

Answer 2

First make sure that your submit button is inside form tag,
then you can just append your html code inside tbody tag :
#what_i_do refer to tbody tag
$("#what_i_do tr").append('<tr class="removeclass'+id+'" id="removeclass'+id+'">'+ 'html code'+ '</tr>');