Add Table Class/Remove Table Class to rows on AJAX Request
<p>I've created a simple table using Bootstrap and PHP which looks like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-condensed table-striped table-bordered"&gt;
  &lt;thead&gt;
    &lt;th scope="col"&gt;Name&lt;/th&gt;
    &lt;th scope="col"&gt;Date&lt;/th&gt;
    &lt;th scope="col"&gt;Select&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;

    &lt;tr id="RFIT1000"&gt;
      &lt;td&gt;Penny Lane&lt;/td&gt;
      &lt;td&gt;10/03/2015&lt;/td&gt;
      &lt;td colspan="2"&gt;
        &lt;button type="button" class="btn btn-success btn-sm"&gt;Yes&lt;/button&gt;&amp;nbsp;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="RFIT1001"&gt;
      &lt;td&gt;Fred Kruger&lt;/td&gt;
      &lt;td&gt;18/01/2016&lt;/td&gt;
      &lt;td colspan="2"&gt;
        &lt;button type="button" class="btn btn-success btn-sm"&gt;Yes&lt;/button&gt;&amp;nbsp;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="RFIT1002"&gt;
      &lt;td&gt;Bob Hope&lt;/td&gt;
      &lt;td&gt;09/08/2016&lt;/td&gt;
      &lt;td colspan="2"&gt;
        &lt;button type="button" class="btn btn-success btn-sm"&gt;Yes&lt;/button&gt;&amp;nbsp;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>I have a script that runs when you click the "Yes" button to select a row to add a class to the selected table row - this is working well - to highlight the selected row green. The user is only allowed to select one row before they submit the form so I now need to modify this so that when they select a table row it highlights the selected row in green but removes any table row classes for all other table rows in the table.</p>

<p>Here's my script at the moment:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  $('button.btn-success').click(function() {
    var refreshItemID = $(this).closest('tr').attr('id');
    console.log(refreshItemID);
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateStaffSelection.php', {
      refreshItemID: refreshItemID,
      selectionType: 'yes'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        console.log(data);
        console.log('something was wrong with the ajax request');
        $this.closest('tr').addClass("warning");
        //make alert visible
        $("#alert_ajax_error").show();
        return; // stop executing this function any further
      } else {
        console.log('update successful - success add class to table row');
        $this.closest('tr').addClass("success");
        $this.closest('tr').removeClass("danger");
        //$(this).closest('tr').attr('class','success');
      }
    }).fail(function(xhr) {
      console.log('ajax request failed');
      // no data available in this context
      $this.closest('tr').addClass("warning");
      //make alert visible
      $("#alert_ajax_error").show();
    });
  });
});</code></pre>
</div>
</div>
</p>

<p>I'm hoping it's possible to extend this to also remove any classes for the non selected row so that only the selected row has the success class added but not sure where to start here.</p>