title: Cloning Checkboxes with different names
body: <p>For better understanding what I want to do, here is a screenshot </p>
  
  <p><img src="https://i.stack.imgur.com/6QGZD.png" alt="enter image description here"></p>
  
  <p>I want to be able to submit whether checkboxes are checked or not. For this I used the trick to have hidden input fields, because otherwise unchecked boxes are not submitted. What I want to do now is to give pairs (one hidden, one checkbox) the same name, but each pair a different name. I tried quite a bit with javascript and jQuery but could not figure out how to get this done. The "+" Button is for adding more Checkboxes, the "-" Button is for deleting them again.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  function clone(button, objid)
  {
      tmpvalue = document.test.elements['param[]'][1].value;
  
      document.test.elements['param[]'][1].value = '';
  
      var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
      button.parentNode.insertBefore(clone_me, button);
  
      document.test.elements['param[]'][1].value = tmpvalue;
  }
  
  function remove_this(objLink)
  {
      objLink.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(objLink.parentNode.parentNode.parentNode.parentNode);
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form name="test" method="post" action="test2.php"&gt;
      &lt;input name="param[0]" value="0" type="hidden"&gt;
  
      &lt;div id="hidden" style="visibility:hidden; display:none"&gt;
      &lt;div id="table"&gt;&lt;table&gt;
          &lt;tr&gt;&lt;td&gt;
              &lt;input name="param[]" type='hidden' value="0"&gt;
              Parameter: &lt;input name="param[]" type="checkbox" value="1"&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;span style="margin-left:2em;"&gt;&lt;/span&gt;&lt;input value="-" onclick="javascript:remove_this(this)" type="button"&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;&lt;/div&gt;  
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;input  style="margin-top:2em;" value="+" onclick="javascript:clone(this, 'table');" type="button"&gt;
          &lt;button type="submit" name="sent"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So it would actually be nice to have some sort of counter like this:</p>
  
  <pre><code>&lt;input name="param[i]" type='hidden' value="0"&gt;
  Parameter: &lt;input name="param[i]" type="checkbox" value="1"&gt;
  </code></pre>
  
  <p>Thanks for your help!</p>