Add Delete row in two different table - php

Question

The rows are getting added in upper table only even though table id is different
The functionality shpuld work as I have included different ID for different table
Please heklpme to identify the error
THE JS is below
$(document).ready(function () {
$('#myTable').on('click', 'input[type="button"]', function () {
$(this).closest('tr').remove();
});
$('p input[type="button"]').click(function () {
$('#myTable').append('<tr><td><input type="text" class="form-control" name="aname[]" value="" placeholder="Input Name" /> </td><td><input type="amount" class="form-control" name="aamount[]" value="" placeholder="Input Value" /></td><td><input type="number" class="form-control" name="apriority[]" value="" placeholder="Input Value" /></td><td><input type="button" class ="btn btn-danger" value="x Delete" /></td></tr>')
});
$('#myTable1').on('click', 'input[type="button"]', function () {
$(this).closest('tr').remove();
});
$('p input[type="button"]').click(function () {
$('#myTable1').append('<tr><td><input type="text" class="form-control" name="dname[]" value="" placeholder="Input Name" /> </td><td><input type="amount" class="form-control" name="damount[]" value="" placeholder="Input Value" /></td><td><input type="number" class="form-control" name="dpriority[]" value="" placeholder="Input Value" /></td><td><input type="button" class ="btn btn-danger" value="x Delete" /></td></tr>')
});
});
Below is HTML
<div class="form-group">
<label for="grade">Grade</label>
<select class="form-control required alphanum" name="grade" id="grade" required>
<option value="">Please select...</option>
<?php fetch_grade($conn);
?>
</select>
</div>
<div class="form-group">
<label for="name">Basic Salary</label>
<input type="text" name="basic" id="basic" class="form-control" />
</div>
<div class="form-group">
<label for="overtime">Overtime Rate(Per Hour)</label>
<input type="text" name="overtime" id="overtime" class="form-control" />
</div>
Allowances
<br>
<p> <input type="button" class="btn btn-primary" value="+ Add Allowance"></p>
<table id="myTable" class="table table-condensed table-hover table-bordered table-hover table-responsive table-striped">
<thead>
<tr>
<th>Allowance Name</th>
<th>Amount</th>
<th>Display Priority</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" name="aname[]" value="" placeholder="Input Name" /> </td>
<td><input type="amount" class="form-control" name="aamount[]" value="" placeholder="Input Value" /></td>
<td><input type="number" class="form-control" name="apriority[]" value="" placeholder="Input Value" /></td>
<td><input type="button" class ="btn btn-danger" value="x Delete" /></td>
</tr>
</tbody>
</table>
Deductions
<p> <input type="button" class="btn btn-primary" value="+ Add Deduction"></p>
<table id="myTable1" class="table table-condensed table-hover table-bordered table-hover table-responsive table-striped">
<thead>
<tr>
<th>Deduction Name</th>
<th>Amount</th>
<th>Display Priority</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" name="dname[]" value="" placeholder="Input Name" /> </td>
<td><input type="amount" class="form-control" name="damount[]" value="" placeholder="Input Value" /></td>
<td><input type="number" class="form-control" name="dpriority[]" value="" placeholder="Input Value" /></td>
<td><input type="button" class ="btn btn-danger" value="x Delete" /></td>
</tr>
</tbody>
</table>
I am not sure where I am going wrong? I have searched various forum but didnt come with accurate solutions and was wonderingif someone canthrow light on this and how can I optmisie it

Answer 1

This selector bind some function twice:
$('p input[type="button"]')
which means it will only run for one table.
Add some class to the <p> element
<p class="btnMyTable"> <input type="button"
<p class="btnMyTable1"> <input type="button"
And bind to it:
$('p.btnMyTable input[type="button"]')
$('p.btnMyTable1 input[type="button"]')