Dynamic input not recorded in array PHP - php

Question

I am making a simple add of items to inventory software which gets the data and adds to database using dynamic inputs.
<div class="col-lg-6">
<form action="invoice_check.php" method="POST">
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-medicines">
<thead>
<tr>
<th>Name</th>
<th>MFR</th>
<th>Quantity</th>
<th>Batch</th>
<th>Expiry</th>
<th>MRP</th>
<th>DSC</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:20%;"><div class="form-group"><input id="1" class="form-
control" placeholder="Name" type="text" name="mname[]"></input></div></td>
<td><div class="form-group"><input class="form-control"
placeholder="Manufacturer" name="mfg[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"
placeholder="Qty" name="qty[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"
placeholder="Batch" name="batch[]"></div></td>
<td><div class="form-group"><input class="form-control" placeholder="MM/YY"
id="cc" name="exp[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"
placeholder="MRP" name="mrp[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"
placeholder="DSC" name="dsc[]"></div></td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</div>
<input type="submit" class="btn btn-primary btn-lg btn-block">
</form>
I have the following jquery for adding the a new Which contains the new input set.
The problem is that although the row gets added, when submitted the array doesn't contain the data of the appended input items.
For example, how many ever inputs i add, that data is never recorded even though I have used the array for the inputs.
I know the scripting of array isn't an issue since I have tried by using the same code as another without adding by jquery and the array has recorded the data.
<script>
$(document).ready(function() {
var wrapper = $(".table-medicines"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x=1;
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
x++;
$(wrapper).append('<tr> <td><div class="form-group"><input class="form-control" id="'+x+'" placeholder="Name" type="text" name="mname[]"/></div></td> <td><div class="form-group"><input class="form-control" placeholder="Manufacturer" name="mfg[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Qty" name="qty[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Batch" name="batch[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Expiry" name="exp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="MRP" name="mrp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="DSC" name="dsc[]"></div></td> <td> <button type="button" class="add_field_button btn btn-danger btn-circle"><i class="fa fa-times "></i></button> </td> </tr>'); //add input box
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).closest('tr').remove(); x--;
})
});
Thanks in advance.

Answer 1

At first, when the DOM is loading, you won't get the Add new button as it is generating inside its self click event. So you have to initialize it on loading. Rest of the things are correct except few minor changes.
$(document).ready(function() {
var wrapper = $(".table-medicines"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x=1;
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
x++;
$(wrapper).append('<tr> <td><div class="form-group"><input class="form-control" id="'+x+'" placeholder="Name" type="text" name="mname[]"/></div></td> <td><div class="form-group"><input class="form-control" placeholder="Manufacturer" name="mfg[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Qty" name="qty[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Batch" name="batch[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Expiry" name="exp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="MRP" name="mrp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="DSC" name="dsc[]"></div></td> <td> <button type="button" class="remove_field btn btn-danger btn-circle"><i class="fa fa-times "></i>Remove</button></td> </tr>'); //add input box
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).closest('tr').remove(); x--;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-lg-6">
<form action="invoice_check.php" method="POST">
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-medicines">
<thead>
<tr>
<th>Name</th>
<th>MFR</th>
<th>Quantity</th>
<th>Batch</th>
<th>Expiry</th>
<th>MRP</th>
<th>DSC</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:20%;">
<div class="form-group"><input id="1" class="form-
control" placeholder="Name" type="text" name="mname[]"></input></div>
</td>
<td>
<div class="form-group"><input class="form-control"
placeholder="Manufacturer" name="mfg[]"></div>
</td>
<td style="width:10%;">
<div class="form-group"><input class="form-control"
placeholder="Qty" name="qty[]"></div>
</td>
<td style="width:10%;">
<div class="form-group"><input class="form-control"
placeholder="Batch" name="batch[]"></div>
</td>
<td>
<div class="form-group"><input class="form-control" placeholder="MM/YY"
id="cc" name="exp[]"></div>
</td>
<td style="width:10%;">
<div class="form-group"><input class="form-control"
placeholder="MRP" name="mrp[]"></div>
</td>
<td style="width:10%;">
<div class="form-group"><input class="form-control"
placeholder="DSC" name="dsc[]"></div>
</td>
<td><button type="button" class="add_field_button btn btn-danger btn-circle"><i class="fa fa-times "></i>Add</button> </td>
</tr>
</tbody>
</table>
</div>
</div>
<input type="submit" class="btn btn-primary btn-lg btn-block">
</form>