title: Two separate forms, with inputs that have same name and id
body: <p>I have two forms on the same page with two labels with <code>for</code> attributes pointing to two checkboxes that have the same ID and name.</p>
  
  <p>When I click one of the second form labels it checks the first form checkbox.</p>
  
  <p>In this case the problem lies when you click the 'x name 2' label, it checks the 'x name' check box, even though they are in different forms:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.customCheckbox div label {
      padding: 5px;
      background-color: white;
      border: 2px solid #aaaaaa;
      background-image: none;
  }
  
  .customCheckbox div input {
      margin: 8px auto;
      padding: 5px;
      text-align: left;
      margin-left: -999999px;
      float: left;
  }
  
  .customCheckbox input[type=checkbox]:checked ~ label,
  .customCheckbox input[type=radio]:checked ~ label {
  
      background-color: #117399;
      color: #eeeeee;
  }
  
  .customCheckbox input[type=radio]:checked ~ label {
  
      background-color: #117399;
      color: #eeeeee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form style="margin:30px;"&gt;
    &lt;div class="customCheckbox"&gt;
      &lt;div&gt;
        &lt;input id="x" name="x" type="checkbox"/&gt;&lt;label for="x"&gt;x name&lt;/label&gt;      
      &lt;/div&gt;
      &lt;br/&gt;
      &lt;div&gt;
        &lt;input id="y" name="y" type="checkbox"/&gt;  &lt;label for="y"&gt;y name&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;form style="margin:30px;"&gt;
    &lt;div class="customCheckbox"&gt;
      &lt;div&gt;
        &lt;input id="x" name="x" type="checkbox"/&gt;&lt;label for="x"&gt;x name 2&lt;/label&gt;      
      &lt;/div&gt;
      &lt;br/&gt;
      &lt;div&gt;
        &lt;input id="y" name="y" type="checkbox"/&gt;  &lt;label for="y"&gt;y name 2&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>I'd like to stay away from renaming the elements (as there are quite a few places this occurs)</li>
  <li>I'd like to try to stay away from JavaScript (if possible)</li>
  <li>Since I am using CSS for styling the labels and checkboxes I cannot nest the checkbox inside the label (because you can't style a parent element in CSS)</li>
  </ul>