使用jQuery在当前行之后添加多个表行

我想在第四行下添加行。但是此js代码附加在最后一行。这是我在html中的表格:

将这行追加到第四行下面的js代码是什么?再次添加行后?请帮忙.. 这是输出。但是我想要加号。但我在第二张图片的最后一个显示中追加了内容。

enter image description here

enter image description here

$(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>