title: Create dynamic input text of group and options and transfer it to php
body: <p>I'm writing simple remote voting system in PHP and I have problem with control of dynamic options and groups in php form.</p>
  
  <p>I would like to have something like this, but.... (asks are at the bottom of my post):</p>
  
  <p><a href="http://imageshack.us/photo/my-images/803/97450434.png/" rel="nofollow">http://imageshack.us/photo/my-images/803/97450434.png/</a></p>
  
  <p><strong>I have the following code:</strong></p>
  
  <p>html:</p>
  
  <pre><code>&lt;fieldset style="width:99%; float:left"&gt;
           &lt;div id="dynamicInput"&gt;
                Group 1&lt;br&gt;&lt;input type="text" name="myGroupInputs[]"&gt;
                   &lt;div id="dynamicInput" style="margin-left:50px;"&gt;
                        Option 1&lt;br&gt;&lt;input type="text" name="myOptionsInputs[]"&gt;
                   &lt;/div&gt;
           &lt;/div&gt;
               &lt;input type="button" value="Add another group" onClick="addGroup('dynamicInput');"&gt;
               &lt;input type="button" value="Add another option" onClick="addInput('dynamicInput');"&gt;         
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>​​​​​​​​​​​​​​​js:</p>
  
  <pre><code>var counter_option = 1;
  var limit_option = 10;
  var counter_group = 1;
  var limit_group = 10;
  function addInput(divName){
  
       if (counter_option == limit_option)  {
             alert('You cannot add more options.');
       }
      else {
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "&lt;font style='margin-left:50px;'&gt;Option&lt;/font&gt; " + (counter_option+ 1) + " &lt;br&gt;&lt;input type='text' style='margin-left:50px;' name='myOptionsInputs[]'&gt;";
            document.getElementById(divName).appendChild(newdiv);
            counter_option++;
       }
  }
  function addGroup(divName){
  
       if (counter_group == limit_group)  {
             alert('You cannot add more groups.');
       }
      else {
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "Group " + (counter_group + 1) + " &lt;br&gt;&lt;input type='text' name='myGroupInputs[]'&gt;";
            document.getElementById(divName).appendChild(newdiv);
            counter_group++;
       }
  }
  </code></pre>
  
  <p><strong>1. How to edit this code to have dependence each option to the right group and reset the counter of options to 0 if I will add another group? <br />
  Group1, Option1, Option2; <br />
  Group2, Option1, Option2; etc.</strong> </p>
  
  <p><strong>2. How to put these values later to the php variables, array or sth... - I would like to insert these values to the database (php
     script). Script must knows that the option corresponding to the right
     group.</strong></p>
  
  <p>My database has two tables:
  Groups and Options(FK to Group)</p>
  
  <p>Link to jsfiddle edit:
  <a href="http://jsfiddle.net/mnyyK/" rel="nofollow">http://jsfiddle.net/mnyyK/</a></p>
  
  <p>Please, help.... </p>