title: How to insert multiple appended/nested array elements in DB using PHP
body: <p>I have a page with some fields that the user can fill. In the main selector the user can only select some predefined options, in the custom selector the user can fill other fields, with more detailed options. There is a button that append one more layer, with all these options again, and a save button that will save all the things that was filled. Something like this:</p>
  
  <pre><code>Main Selector
  |_Selector
  
  Custom Selector
  |_Name
  |_Type
  |_Attribute
  |_numOfOptions (When selected, opens a number of fields related to number)
    |_value
    |_color
  
  (New Layer button)
  (Save Button)
  </code></pre>
  
  <p>Now they all have the same name and save the data as an array (ex: <code>&lt;input name="color[]"&gt;</code>). When I save the data in the page, after append some elements, I get the all the data the same time and mixed. </p>
  
  <p>I know WHY this is happening, and I imagine one way to solve this, but I'm not sure if is the correct way. I think I can get the total elements in one layer from JavaScript and pass this number to PHP, then I can iterate the value only this number of times. In the next loop I can start where the previous loop stopped. </p>
  
  <p><strong>Extreme simplified PHP code, without any query:</strong></p>
  
  <pre><code>$nomeCamada = $_POST['nomeCamada'];
  $attrName = $_POST['attrName'];
  $tipoSelector = $_POST['tipoSelector'];
  foreach($nomeCamada as $value2) {
      $key = array_search($value2, $nomeCamada);
      echo "Saving in DB...  CustomSelector: " . $value2 . " | Attr name: " . $attrName[$key] . " | Type: " . $tipoSelector[$key] . "&lt;br&gt;";
      $attrValue = $_POST['attrValue'];
      $color = $_POST['color'];
      foreach ($attrValue as $value3) {
          $key2 = array_search($value3, $attrValue);
          echo "____Class name " . $value2 . " | Attr name: " . $attrName[$key] . " | Attr value: " . $value3 . " | Attr color: " . $color[$key2] . "&lt;br&gt;";
      }
  }
  </code></pre>
  
  <p><strong>Output (Showing 1 main element and 2 custom, the first with 2 attributes and the last with 3. The scratched elements are those who are saving incorrectly.):</strong></p>
  
  <pre><code>
  Saving in DB... Selector: Main
  Saving in DB... CustomSelector: CustomLayer1 | Attribute: attr1 | Type: type1
  ____Class name: CustomLayer1 | Attr name: attr1 | Attr value: 2 | Attr color: #ff0000
  ____Class name: CustomLayer1 | Attr name: attr1 | Attr value: 4 | Attr color: #000000
  <s>____Class name: CustomLayer1 | Attr name: attr1 | Attr value: 10 | Attr color: #ffff00
  ____Class name: CustomLayer1 | Attr name: attr1 | Attr value: 20 | Attr color: #800040
  ____Class name: CustomLayer1 | Attr name: attr1 | Attr value: 30 | Attr color: #8000ff</s>
  Saving in DB... CustomSelector: CustomLayer2 | Attribute: attr2 | Type: type2
  <s>____Class name: CustomLayer2 | Attr name: attr2 | Attr value: 2 | Attr color: #ff0000
  ____Class name: CustomLayer2 | Attr name: attr2 | Attr value: 4 | Attr color: #000000</s>
  ____Class name: CustomLayer2 | Attr name: attr2 | Attr value: 10 | Attr color: #ffff00
  ____Class name: CustomLayer2 | Attr name: attr2 | Attr value: 20 | Attr color: #800040
  ____Class name: CustomLayer2 | Attr name: attr2 | Attr value: 30 | Attr color: #8000ff
  </code></pre>
  
  <p>As I say, I don't know if this is the ideal way to do this. I'm also can fix this saving one layer at a time, but I really want so save all the same time. Let me know if this post needs any edition.</p>