Add multiple table row after current row using jquery

Question

I want to add row under 4th row. but this js code append in last row. Here is my table in html:

What will be the js code for append this line under the 4th line? and again after added row? please help.. here is the output. but i want under plus sign. but i append in the last showing in 2nd picture.

---

 $(document).ready(function() { var i = 1; $('#add').click(function() { i++; $('#dynamic_field').append( '<tr id="row' + i + '">' + '<td></td>' + '<td>Due/Advance for &nbsp; &nbsp; &nbsp;' + '<select name="month[]" id="" style="width: 40%; border: inset;">' + '<option value="" hidden>Select Month</option>' + '<option value="January">January</option>' + '<option value="February">February</option>' + '<option value="March">March</option>' + '<option value="April">April</option>' + '<option value="May">May</option>' + '<option value="June">June</option>' + '<option value="July">July</option>' + '<option value="August">August</option>' + '<option value="September">September</option>' + '<option value="October">October</option>' + '<option value="November">November</option>' + '<option value="December">December</option>' + '</select>' + '</td>' + '<td>' + '<div class="input-group">' + '<input class="form-control" type="number" name="due_advance[]"' + 'placeholder="due/advance amount">' + '<div class="input-group-prepend">' + '<button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button>' + '</div>' + '</div>' + '</td>' + '</tr>' ); }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); $('#row' + button_id + '').remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table width="100%" id="dynamic_field"> <tr> <th width="10%">sl No.</th> <th width="40%">Purpose</th> <th width="50%">Amount</th> </tr> <tr> <td>01</td> <td>Monthly Fees</td> <td><input class="form-control" type="number" name="monthly_fees" placeholder="monthly fee's amount"></td> </tr> <tr> <td>02</td> <td>Admission/Renew Admission</td> <td><input class="form-control" type="number" name="admission" placeholder="admission fee's amount"></td> </tr> <tr> <td>03</td> <td>Due/Advance for &nbsp; &nbsp; &nbsp; <select name="month[]" id="" style="width: 40%; border: inset;"> <option value="" hidden>Select Month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> </td> <td> <div class="input-group"> <input class="form-control" type="number" name="due_advance[]" placeholder="due/advance amount"> <div class="input-group-prepend"> <button class="btn btn-primary" type="button" id="add"><i class="fas fa-plus"></i></button> </div> </div> </td> </tr> <tr> <td>04</td> <td>Session Fee</td> <td><input class="form-control" type="number" name="session_fee" placeholder="session fee's amount"></td> </tr> <tr> <td>05</td> <td>Library Fee</td> <td><input class="form-control" type="number" name="library" placeholder="library fee's amount"></td> </tr> <tr> <td>06</td> <td>Sports Fee</td> <td><input class="form-control" type="number" name="sports" placeholder="sports fee's amount"></td> </tr> <tr> <td>07</td> <td>Poor Funds</td> <td><input class="form-control" type="number" name="poor_funds" placeholder="poor funds amount"></td> </tr> <tr> <td>08</td> <td>Fine</td> <td><input class="form-control" type="number" name="fine" placeholder="fine amount"> </td> </tr> <tr> <td>09</td> <td>Reciept Book</td> <td><input class="form-control" type="number" name="reciept" placeholder="reciept book's amount"></td> </tr> <tr> <td>10</td> <td>Milad</td> <td><input class="form-control" type="number" name="milad" placeholder="milad fee's amount"> </td> </tr> <tr> <td>11</td> <td>Scout Fees</td> <td><input class="form-control" type="number" name="scout" placeholder="scout fee's amount"> </td> </tr> <tr> <td>12</td> <td>Development Fees</td> <td><input class="form-control" type="number" name="development" placeholder="development fee's amount"></td> </tr> <tr> <td>13</td> <td>Registration</td> <td><input class="form-control" type="number" name="registration" placeholder="registration fee's amount"></td> </tr> <tr> <td>14</td> <td>1st Tutorial</td> <td><input class="form-control" type="number" name="f_tutorial" placeholder="1st Tutorial fee's amount"></td> </tr> <tr> <td>15</td> <td>2nd Tutorial</td> <td><input class="form-control" type="number" name="s_tutorial" placeholder="2nd Tutorial fee's amount"></td> </tr> <tr> <td>16</td> <td>3rd Tutorial</td> <td><input class="form-control" type="number" name="t_tutorial" placeholder="3rd Tutorial fee's amount"></td> </tr> <tr> <td>17</td> <td>1st Semester Exam</td> <td><input class="form-control" type="number" name="f_exam" placeholder="1st Semester exam fee's amount"></td> </tr> <tr> <td>18</td> <td>2nd Semester Exam</td> <td><input class="form-control" type="number" name="s_exam" placeholder="2nd Semester exam fee's amount"></td> </tr> <tr> <td>19</td> <td>Final Semester Exam</td> <td><input class="form-control" type="number" name="t_exam" placeholder="3rd/Final exam fee's amount"></td> </tr> <tr> <td>20</td> <td>Labratory Fees</td> <td><input class="form-control" type="number" name="labratory" placeholder="labratory fee's amount"></td> </tr> <tr> <td>21</td> <td>Transport</td> <td><input class="form-control" type="number" name="transport" placeholder="transport fee's amount"></td> </tr> <tr> <td>22</td> <td>Syllabus</td> <td><input class="form-control" type="number" name="syllabus" placeholder="syllabus fee's amount"></td> </tr> <tr> <td>23</td> <td>Certificate</td> <td><input class="form-control" type="number" name="certificate" placeholder="certificate fee's amount"></td> </tr> <tr> <td>24</td> <td>Testimonial</td> <td><input class="form-control" type="number" name="testimonial" placeholder="testimonial fee's amount"></td> </tr> <tr> <td>25</td> <td>Generator Bill</td> <td><input class="form-control" type="number" name="generator" placeholder="generator fee's amount"></td> </tr> <tr> <td>26</td> <td> Extras &nbsp; &nbsp; <input type="text" style="width: 40%; border: inset;" placeholder="reason..." name="extra_subject"> </td> <td><input class="form-control" type="number" name="extra" placeholder="extra fee's amount"> </td> </tr> </table>

Answer 1

You can have more than one tbody.

Also note I use.closest to remove the row

 $(function() { var i = 1; $('#add').on("click",function() { i++; $('#dynamic_field').append( '<tr id="row' + i + '">' + '<td></td>' + '<td>Due/Advance for &nbsp; &nbsp; &nbsp;' + '<select name="month[]" id="" style="width: 40%; border: inset;">' + '<option value="" hidden>Select Month</option>' + '<option value="January">January</option>' + '<option value="February">February</option>' + '<option value="March">March</option>' + '<option value="April">April</option>' + '<option value="May">May</option>' + '<option value="June">June</option>' + '<option value="July">July</option>' + '<option value="August">August</option>' + '<option value="September">September</option>' + '<option value="October">October</option>' + '<option value="November">November</option>' + '<option value="December">December</option>' + '</select>' + '</td>' + '<td>' + '<div class="input-group">' + '<input class="form-control" type="number" name="due_advance[]"' + 'placeholder="due/advance amount">' + '<div class="input-group-prepend">' + '<button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button>' + '</div>' + '</div>' + '</td>' + '</tr>' ); }); $("#dynamic_field").on('click', '.btn_remove', function() { $(this).closest("tr").remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <table width="100%"> <thead> <tr> <th width="10%">sl No.</th> <th width="40%">Purpose</th> <th width="50%">Amount</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>Monthly Fees</td> <td><input class="form-control" type="number" name="monthly_fees" placeholder="monthly fee's amount"></td> </tr> <tr> <td>02</td> <td>Admission/Renew Admission</td> <td><input class="form-control" type="number" name="admission" placeholder="admission fee's amount"></td> </tr> <tr> <td>03</td> <td>Due/Advance for &nbsp; &nbsp; &nbsp; <select name="month[]" id="" style="width: 40%; border: inset;"> <option value="" hidden>Select Month</option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> </td> <td> <div class="input-group"> <input class="form-control" type="number" name="due_advance[]" placeholder="due/advance amount"> <div class="input-group-prepend"> <button class="btn btn-primary" type="button" id="add"><i class="fas fa-plus"></i></button> </div> </div> </td> </tr> <tr> <td>04</td> <td>Session Fee</td> <td><input class="form-control" type="number" name="session_fee" placeholder="session fee's amount"></td> </tr> </tbody> <tbody id="dynamic_field"> </tbody> <tbody> <tr> <td>05</td> <td>Library Fee</td> <td><input class="form-control" type="number" name="library" placeholder="library fee's amount"></td> </tr> <tr> <td>06</td> <td>Sports Fee</td> <td><input class="form-control" type="number" name="sports" placeholder="sports fee's amount"></td> </tr> <tr> <td>07</td> <td>Poor Funds</td> <td><input class="form-control" type="number" name="poor_funds" placeholder="poor funds amount"></td> </tr> <tr> <td>08</td> <td>Fine</td> <td><input class="form-control" type="number" name="fine" placeholder="fine amount"> </td> </tr> <tr> <td>09</td> <td>Reciept Book</td> <td><input class="form-control" type="number" name="reciept" placeholder="reciept book's amount"></td> </tr> <tr> <td>10</td> <td>Milad</td> <td><input class="form-control" type="number" name="milad" placeholder="milad fee's amount"> </td> </tr> <tr> <td>11</td> <td>Scout Fees</td> <td><input class="form-control" type="number" name="scout" placeholder="scout fee's amount"> </td> </tr> <tr> <td>12</td> <td>Development Fees</td> <td><input class="form-control" type="number" name="development" placeholder="development fee's amount"></td> </tr> <tr> <td>13</td> <td>Registration</td> <td><input class="form-control" type="number" name="registration" placeholder="registration fee's amount"></td> </tr> <tr> <td>14</td> <td>1st Tutorial</td> <td><input class="form-control" type="number" name="f_tutorial" placeholder="1st Tutorial fee's amount"></td> </tr> <tr> <td>15</td> <td>2nd Tutorial</td> <td><input class="form-control" type="number" name="s_tutorial" placeholder="2nd Tutorial fee's amount"></td> </tr> <tr> <td>16</td> <td>3rd Tutorial</td> <td><input class="form-control" type="number" name="t_tutorial" placeholder="3rd Tutorial fee's amount"></td> </tr> <tr> <td>17</td> <td>1st Semester Exam</td> <td><input class="form-control" type="number" name="f_exam" placeholder="1st Semester exam fee's amount"></td> </tr> <tr> <td>18</td> <td>2nd Semester Exam</td> <td><input class="form-control" type="number" name="s_exam" placeholder="2nd Semester exam fee's amount"></td> </tr> <tr> <td>19</td> <td>Final Semester Exam</td> <td><input class="form-control" type="number" name="t_exam" placeholder="3rd/Final exam fee's amount"></td> </tr> <tr> <td>20</td> <td>Labratory Fees</td> <td><input class="form-control" type="number" name="labratory" placeholder="labratory fee's amount"></td> </tr> <tr> <td>21</td> <td>Transport</td> <td><input class="form-control" type="number" name="transport" placeholder="transport fee's amount"></td> </tr> <tr> <td>22</td> <td>Syllabus</td> <td><input class="form-control" type="number" name="syllabus" placeholder="syllabus fee's amount"></td> </tr> <tr> <td>23</td> <td>Certificate</td> <td><input class="form-control" type="number" name="certificate" placeholder="certificate fee's amount"></td> </tr> <tr> <td>24</td> <td>Testimonial</td> <td><input class="form-control" type="number" name="testimonial" placeholder="testimonial fee's amount"></td> </tr> <tr> <td>25</td> <td>Generator Bill</td> <td><input class="form-control" type="number" name="generator" placeholder="generator fee's amount"></td> </tr> <tr> <td>26</td> <td> Extras &nbsp; &nbsp; <input type="text" style="width: 40%; border: inset;" placeholder="reason..." name="extra_subject"> </td> <td><input class="form-control" type="number" name="extra" placeholder="extra fee's amount"> </td> </tr> </tbody> </table>