title: How to make multiple form inside multiple form in asp.net mvc?
body: <p>Im new here,
  i wanna ask some tricky question.</p>
  <p>How to make multiple input inside multiple input dynamically, like the picture below
  <a href="https://i.stack.imgur.com/khvcz.png" rel="nofollow noreferrer">This is the picture</a>
  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.</p>
  <p>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 ?</p>
  <p>Thank you!!</p>
  <pre><code>                      &lt;div class=&quot;container&quot;&gt;
                            &lt;table class=&quot;_table&quot;&gt;
                                &lt;thead&gt;
                                    &lt;tr&gt;
                                        &lt;th&gt;ToolNumber&lt;/th&gt;
                                        &lt;th&gt;Resin&lt;/th&gt;
                                        &lt;th&gt;IPN&lt;/th&gt;
                                        &lt;th&gt;Mold Colour&lt;/th&gt;
                                        &lt;th&gt;Description&lt;/th&gt;
                                        &lt;th width=&quot;50px&quot;&gt;
                                            &lt;div class=&quot;_container&quot;&gt;
                                                &lt;input type=&quot;button&quot; onclick=&quot;create_tr('table_body')&quot; i class=&quot;fa fa-plus&quot;&gt;
                                            &lt;/div&gt;
                                        &lt;/th&gt;
                                    &lt;/tr&gt;
                                &lt;/thead&gt;
                                &lt;tbody id=&quot;table_body&quot;&gt;
                                    &lt;tr&gt;
                                        &lt;td&gt;
                                            &lt;input class=&quot;form-control form-control-lg&quot; type=&quot;text&quot; name=&quot;toolnumber&quot; placeholder=&quot;Tool Number&quot; /&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;
                                            &lt;select name=&quot;pdresin&quot;&gt;
                                                @foreach (var data3 in Model)
                                                {
                                                    if (data3.pd_resinName != null)
                                                    {
                                                        &lt;option value=&quot;@data3.pd_resinID&quot;&gt;@data3.pd_resinName&lt;/option&gt;
                                                    }
                                                }
                                            &lt;/select&gt;
                                        &lt;/td&gt;
  
                                        &lt;!--Dibawah ini merupakan 3 row yang bisa ditambah--&gt;
                                        &lt;td&gt;
                                            &lt;input class=&quot;form-control form-control-lg&quot; type=&quot;text&quot; name=&quot;acipn&quot; placeholder=&quot;IPN&quot; /&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;
                                            &lt;input class=&quot;form-control form-control-lg&quot; type=&quot;text&quot; name=&quot;moldcolor&quot; placeholder=&quot;Mold Color&quot; /&gt;
                                        &lt;/td&gt;
                                        &lt;td&gt;
                                            &lt;input class=&quot;form-control form-control-lg&quot; type=&quot;text&quot; name=&quot;deskripsi&quot; placeholder=&quot;Description&quot; /&gt;
                                        &lt;/td&gt;
                                        &lt;!--Sampe sini--&gt;
  
                                        &lt;td&gt;
                                            &lt;div class=&quot;_container&quot;&gt;
                                                &lt;input type=&quot;button&quot; onclick=&quot;remove_tr(this)&quot; i class=&quot;fa fa-minus&quot; /&gt;
                                            &lt;/div&gt;
                                        &lt;/td&gt;
                                    &lt;/tr&gt;
                                &lt;/tbody&gt;
                            &lt;/table&gt;
                        &lt;/div&gt;
  
  
  
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      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 =&gt; {
              if (x !== firstTr.lastElementChild) {
                  x.firstElementChild.value = '';
              }
          });
      }
  
  
  
  
      function remove_tr(This) {
          if (This.closest('tbody').childElementCount == 1) {
              alert(&quot;You Don't have Permission to Delete This ?&quot;);
          } else {
              This.closest('tr').remove();
          }
      }
  &lt;/script&gt;
  </code></pre>