Checked and change radio button in one group name
<p>I have a table that has a radio button with the same "name" attribute as a row selector in each row.<br>
There is simple JQuery code that selects the checked radio button and finds the <code>&lt;tr&gt;</code> tag and then highlights it by css, the problem is: when I change the radio button from another table row's, new rows gets the style but previous row are still highlighted! here is my HTML:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.my-table input').click(function() {
    var checked = $(this).attr('checked', true);
    if (checked) {
        $(this).closest('tr').addClass("highlighted");
    } else {
        $(this).closest('tr').removeClass("highlighted");
    }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.highlighted {
  background-color: lightgreen;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;table class="my-table"&gt;
  &lt;thead class="my-table-head"&gt;
    &lt;tr&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;p&gt;
          &lt;input class="with-gap" name="group1" type="radio" id="rbtn2"&gt;
          &lt;label for="rbtn2"&gt;&lt;/label&gt;
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td&gt;title&lt;/td&gt;

    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;p&gt;
          &lt;input class="with-gap" name="group1" type="radio" id="rbtn3"&gt;
          &lt;label for="rbtn3"&gt;&lt;/label&gt;
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td&gt;titke2&lt;/td&gt;

    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;p&gt;
          &lt;input class="with-gap" name="group1" type="radio" id="rbtn4"&gt;
          &lt;label for="rbtn4"&gt;&lt;/label&gt;
        &lt;/p&gt;
      &lt;/td&gt;
      &lt;td&gt;title3&lt;/td&gt;

    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>