title: Multiple Radio Button Groups With Same Name
body: <p>I have been passed down a complex application which dynamically creates HTML.</p>
  
  <p>The problem is, the previous person did not know that the "name" attribute of radio buttons actually is the group association.</p>
  
  <p>With the following mark up, is there any way to put these in two groups</p>
  
  <pre><code>&lt;div&gt;
    &lt;%-- would like this to be a seperate group without changing name--%&gt;
    &lt;label class="radio-inline"&gt;&lt;input type="radio" name="radio" value="1"&gt;Group 1 Option 1&lt;/label&gt;
    &lt;label class="radio-inline"&gt;&lt;input type="radio" name="radio" value="2"&gt;Group 1 Option 2&lt;/label&gt;
    &lt;label class="radio-inline"&gt;&lt;input type="radio" name="radio" value="3"&gt;Group 1 Option 3&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;%-- would like this to be a seperate group without changing name--%&gt;
    &lt;label class="radio-inline"&gt;&lt;input type="radio" name="radio" value="1"&gt;Group 2 Option 1&lt;/label&gt;
    &lt;label class="radio-inline"&gt;&lt;input type="radio" name="radio" value="2"&gt;Group 2 Option 2&lt;/label&gt;
    &lt;label class="radio-inline"&gt;&lt;input type="radio" name="radio" value="3"&gt;Group 2 Option 3&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there any div or anything I can wrap around them to separate the grouping? I have tried field set and legend but it has no effect. I know I could put each one in a form but then they will not all be submitted.</p>