How to change buttons without having any affect on the other buttons?
<p>I have an if else statement below where it turns on and off buttons depending if the other button is on or off. This deals with 2 buttons, "Yes" or "No".</p>

<pre><code>function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }
    var $btn = $(btn);
    var id = btn.id;
    var $otherYNBtn = id === "answerYes" ? $("#answerNo") : $("#answerYes");

$(btn).toggleClass("answerBtnsOff");
$(btn).toggleClass("answerBtnsOn");

    if ($("#answerYes", context).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }

    else if ($("#answerNo", context).hasClass('answerBtnsOn')) {
        $otherYNBtn.removeClass('answerBtnsOn').addClass('answerBtnsOff');
    }


    return false;
}
</code></pre>

<p>Now this code works for these buttons below which are displayed at the top:</p>

<pre><code>&lt;table id="optionAndAnswer" class="optionAndAnswer"&gt;

...

&lt;input class="answerBtns answers answerBtnsOff" name="answerYesName"   id="answerYes"   type="button"   value="Yes"     onclick="btnclick(this);"/&gt;
&lt;input class="answerBtns answers answerBtnsOff" name="answerNoName"    id="answerNo"        type="button"   value="No"      onclick="btnclick(this);"/&gt;
</code></pre>

<p>Now the situation I have is that obviously it only works for the buttons above, but what happens is the user is able to add these buttons in a new row by appending them into a new row. The code which appends these buttons in a new row is below:</p>

<pre><code>var $this;
$('#optionAndAnswer .answers').each(function() {
    $this = $(this);

    var $newBtn = $("&lt;input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' /&gt;".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id')+'Row');


    $newBtn.appendTo($cell);

    i++;
});
</code></pre>

<p>The above code copies all of the attributes (name, class, id) from the buttons on top into a new row, except the only difference is that the id for the appended buttons contain the string "Row" at the end of the id.</p>

<p>What my question is that what I want to do is change my if/else if function so that it works for all 2 buttons, no matter if they are on top, or in row 1 or row 2 or etc.</p>

<p>So for example:</p>

<ul>
<li><p>If I have Yes and No buttons on top control, Yes and No buttons in row 1 and Yes and No buttons in row 2, All of these buttons having the "Yes" button turned on.</p></li>
<li><p>If I click on "No" button in top control, it should turn on the "No" button and turn off the "Yes" button in the top control only, it should not have any affect on row 1 or 2.</p>

<ul>
<li><p>If I click on "No" button in row 1, it should turn on the "No" button and turn off the "Yes" button in row 1 only, it should not have any affect on row 2 or top control.</p></li>
<li><p>If I click on "No" button in row 2, it should turn on the "No" button and turn off the "Yes" button in row 2 only, it should not have any affect on row 1 or top control.</p></li>
</ul></li>
</ul>

<p>How can this be achieved, at the moment my if else statements only work for the buttons on the top control (because of its id), but not with any of the rows.</p>
