title: Radio button selecting only one "YES" and one "No" option in a group
body: <p>I was trying to create something similar to this: <a href="https://www.123test.com/disc-personality-test/" rel="nofollow noreferrer">https://www.123test.com/disc-personality-test/</a></p>
  
  <p>Only one "Yes" and one "No" options must be selected in a group, so there wont be two selections in a row or column</p>
  
  <p><a href="https://i.stack.imgur.com/x1Td8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x1Td8.png" alt="enter image description here"></a> </p>
  
  <p>I tried to create a basic html grouping:</p>
  
  <pre><code>&lt;div id="main1"&gt;
              &lt;div id="group1"&gt;
                  &lt;input type="radio" name="group1" class="group1" value="test1"&gt; 
                  &lt;input type="radio" name="group1" class="group1" value="test2"&gt; Group 1
              &lt;/div&gt;
              &lt;div id="group2"&gt;
                  &lt;input type="radio" name="group2" class="group2" value="test1"&gt; 
                  &lt;input type="radio" name="group2" class="group2" value="test2"&gt; Group 2
              &lt;/div&gt;
              &lt;div id="group3"&gt;
                  &lt;input type="radio" name="group3" class="group3" value="test1"&gt; 
                  &lt;input type="radio" name="group3" class="group3" value="test2"&gt; Group 3
              &lt;/div&gt;
              &lt;div id="group4"&gt;
                  &lt;input type="radio" name="group4" class="group4" value="test1"&gt; 
                  &lt;input type="radio" name="group4" class="group4" value="test2"&gt; Group 4
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>But i still have no idea about how the Javascript / jQuery code is supposed to be like. If you have better suggestions for the HTML structure, please do suggest that too. The information from this survey is supposed to be uploaded into a database.</p>