How to make multiple form inside multiple form in asp.net mvc?

Im new here, i wanna ask some tricky question.

How to make multiple input inside multiple input dynamically, like the picture below This is the picture Once we click the add new tool, that 5 textbox will be appear, for each row we can add new ipn, once we click the add new ipn button, that 3 textbox will be appear below the 5 textbox before, but the textbox is only appear for 3 textbox only, i already give an arrow, so you can check.

i already making the add new tool button, so 5 textbox is already appear, but i still confuse how to add new ipn (the 3 texbox inside multiple) so my question is, how to make the multiple input (add new ipn) inside them. Thats my code, so what should i add more ?

Thank you!!

                      <div class="container">
                          <table class="_table">
                              <thead>
                                  <tr>
                                      <th>ToolNumber</th>
                                      <th>Resin</th>
                                      <th>IPN</th>
                                      <th>Mold Colour</th>
                                      <th>Description</th>
                                      <th width="50px">
                                          <div class="_container">
                                              <input type="button" onclick="create_tr('table_body')" i class="fa fa-plus">
                                          </div>
                                      </th>
                                  </tr>
                              </thead>
                              <tbody id="table_body">
                                  <tr>
                                      <td>
                                          <input class="form-control form-control-lg" type="text" name="toolnumber" placeholder="Tool Number" />
                                      </td>
                                      <td>
                                          <select name="pdresin">
                                              @foreach (var data3 in Model)
                                              {
                                                  if (data3.pd_resinName != null)
                                                  {
                                                      <option value="@data3.pd_resinID">@data3.pd_resinName</option>
                                                  }
                                              }
                                          </select>
                                      </td>

                                      <!--Dibawah ini merupakan 3 row yang bisa ditambah-->
                                      <td>
                                          <input class="form-control form-control-lg" type="text" name="acipn" placeholder="IPN" />
                                      </td>
                                      <td>
                                          <input class="form-control form-control-lg" type="text" name="moldcolor" placeholder="Mold Color" />
                                      </td>
                                      <td>
                                          <input class="form-control form-control-lg" type="text" name="deskripsi" placeholder="Description" />
                                      </td>
                                      <!--Sampe sini-->

                                      <td>
                                          <div class="_container">
                                              <input type="button" onclick="remove_tr(this)" i class="fa fa-minus" />
                                          </div>
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>




<script type="text/javascript">
    function create_tr(table_id) {
        let table_body = document.getElementById(table_id),
            first_tr = table_body.firstElementChild
        tr_clone = first_tr.cloneNode(true);

        table_body.append(tr_clone);

        clean_first_tr(table_body.firstElementChild);
    }




    function clean_first_tr(firstTr) {
        let children = firstTr.children;

        children = Array.isArray(children) ? children : Object.values(children);
        children.forEach(x => {
            if (x !== firstTr.lastElementChild) {
                x.firstElementChild.value = '';
            }
        });
    }




    function remove_tr(This) {
        if (This.closest('tbody').childElementCount == 1) {
            alert("You Don't have Permission to Delete This ?");
        } else {
            This.closest('tr').remove();
        }
    }
</script>