title: jquery click radio button clicks another
body: <p>I am having trouble with some code. I have a table with a number of radio button options in each cell if one is clicked It then looks up what is the opposite set and then clicks that set.</p>
  
  <p>All is working well except when I click the first one in the set it does not click the opposite one.</p>
  
  <p>I have set up the code in JSFiddle, would be grateful for any help.</p>
  
  <p><a href="https://jsfiddle.net/mikeu/yx89h5nn/" rel="nofollow noreferrer">https://jsfiddle.net/mikeu/yx89h5nn/</a></p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td class="cb"&gt;
        &lt;div class="btn-group" data-toggle="buttons" data-opposite-name="_S1"&gt;
          &lt;label class="btn btn-xs"&gt;
            &lt;input type="radio" name="_L1" value="a"&gt;
          &lt;/label&gt;
          &lt;label class="btn btn-xs"&gt;
            &lt;input type="radio" name="_L1" value="b"&gt;
          &lt;/label&gt;
          &lt;label class="btn btn-xs"&gt;
            &lt;input type="radio" name="_L1" value="c"&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td class="cb"&gt;
        &lt;div class="btn-group" data-toggle="buttons" data-opposite-name="_L1"&gt;
          &lt;label class="btn btn-xs"&gt;
            &lt;input type="radio" name="_S1" value="a"&gt;
          &lt;/label&gt;
          &lt;label class="btn btn-xs"&gt;
            &lt;input type="radio" name="_S1" value="b"&gt;
          &lt;/label&gt;
          &lt;label class="btn btn-xs"&gt;
            &lt;input type="radio" name="_S1" value="c"&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  
  $('input:radio').change(function () {
    var opposite = $(this).parent().closest('div').data("opposite-name");
  
    if ($('*[name="' + opposite + '"]').val() != $(this).val()) {
      $('*[name="' + opposite + '"][value="' + $(this).val() + '"]').click();
    }
  });
  </code></pre>