title: Multi-step form
body: <p>i'm having a problem on how should i implement/build my form. here's the overview.  </p>
  
  <p>the first step of the form is to fill up the "Responsibility Center". however, the user can add multiple responsibility center. then the next step would be - each responsibility center added should have one or many "account codes". at the end of the form, before submitting it, all the data should be editable.</p>
  
  <p>the result should be like this:  </p>
  
  <pre><code>|**responsibility center**||**account codes**|  
  |        center 1         || account code 1  |  
  |                         || account code 2  |  
  |        center 2         || account code 1  |
  etc..
  </code></pre>
  
  <p>i just need some idea on how the form should be built/implemented.</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p><strong>This is what i've tried</strong>  </p>
  
  <p><strong>1st step</strong>
  <img src="https://i.stack.imgur.com/SkwHS.png" alt="1st step - responsibility center"></p>
  
  <p><strong>2nd step</strong><br>
  <img src="https://i.stack.imgur.com/7Kv55.png" alt="2nd step - account codes"></p>
  
  <p><strong>result</strong><br>
  <img src="https://i.stack.imgur.com/4N4el.png" alt="result"></p>
  
  <p><strong>EDIT 2</strong>
  i already know how to add multiple rows (like on the 2nd step) and i can implement that already on the first to the 1st step. so here are my questions:</p>
  
  <ol>
  <li>how can i add account codes per responsibility center?  </li>
  <li>if what i've tried is not a practical way to implement it, then how should i do it?</li>
  </ol>