Добавить несколько строк таблицы после текущей строки, используя jquery

Question

Я хочу добавить строку под 4-м рядом. но этот код js добавляется в последнюю строку. Вот моя таблица в html:

Каким будет код js для добавления этой строки под 4-й строкой? и снова после добавления строки? помогите пожалуйста .. вот результат. но я хочу под знаком плюс. но я добавляю последний показ на втором изображении.

---

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

У вас может быть более одного tbody.

Также обратите внимание, что я использую .closest для удаления строки

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