Toggle Selected Table Row Highlight on Button Click

Question

I have a simple table with a Select button for each row that when clicked calls a PHP script to update a Session Variable with the ID of the selected Item. Here's the table:

<tr class="" id="PR9215">
  <td>CODE A</td>
  <td>Fresh Frust</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="PR9594">
  <td>Oranges</td>
  <td>Fresh Oranges</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="PR9588">
  <td>MANGO</td>
  <td>Fresh Mango</td>
  <td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>

and here's the script that it calls:

$(document).ready(function() {
  $('button.btn-success').click(function() {
    var itemID = $(this).closest('tr').attr('id');
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateSelections.php', {
      itemID: itemID,
      selectionType: 'yes'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        var ajaxError = (data.text);
        var errorAlert = 'There was an error updating your selections - ' + ajaxError + '. Please contact Support';
        $this.closest('tr').addClass("warning");
        $('#alert_ajax_error').html(errorAlert);
        $("#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) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an error updating your selections - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact Support';
      console.log('ajaxError: ' + ajaxError);
      $this.closest('tr').addClass("warning");
      $('#alert_ajax_error').html(ajaxError);
      $("#alert_ajax_error").show();
    });
  });
});

This is working when it comes to making the initial selection - the table row is coloured green to indicate it has been selected. I now need to extend this so that when the Select button is clicked a 2nd time it then removes the green table row highlighting and returns it to it's original state.

Now sure how to go about extending the script to achieve this.

Answer 1

Check below logic for that:

$('button.btn-success').click(function() {
if ($this.closest('tr').hasClass("first_click")) {
  $this.closest('tr').removeClass();
//$( "tr" ).removeClass();
return false;
}else{
$this.closest('tr').addClass("first_click");
}