adding custom class by index in jQuery

As someone new to JS and jQuery, I'm working on a table with multiple columns that contain numbers, except for the last one which has text. My goal is to first add the "custom-sortable" class to all elements in the last column that equal the word "Camp", and then add the "custom-sortable" class to all elements in the entire table where the last column equals to "Camp". I've tried different approaches, but haven't had success. My latest idea is to use the index of elements in the last column that include the word "Camp". Any help or hints would be appreciated.

Edit: The table is a html, the class is just to change the background color of all elements equal to "Camp".

The following code works in terms of adding the class to the last column.

.custom-sortable .rank-list-item.rank-list-item-Camp {
    background-color: grey;
}

$(document).ready(function() {
            var targetIndex = -1;
            $('.custom-sortable .rank-list-item').each(function(index) {
            if ($(this).text() === 'Camp') {
            targetIndex = index;
            $(this).addClass('custom-sortable rank-list-item-Camp');
        }
        });
        if (targetIndex >= 0) {
        $('.custom-sortable .rank-list-item').eq(targetIndex).addClass('custom-sortable');
        }
        });

But i wish to end up with these results

When you locate your target you can traverse up the DOM to the parent tr with .closest('tr'). You can then target all the child tds with .find('td'). Here is an abbreviated snippet to demonstrate, but you only need to insert: .closest('tr').find('td')

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {

  $('td').each(function(index) {

    if ($(this).text() === 'Camp') {

      $(this).closest('tr').find('td').addClass('rank-list-item-Camp');

    }

  });

});

<!-- language: lang-css -->

.rank-list-item-Camp {
  background-color: grey;
}

table {
  border-collapse: collapse;
}

td {
  padding: 1em;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>Camp</td>
    <td>3</td>
  </tr>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<!-- end snippet -->

P.S. If you are just starting to learn, then I would recommend just learning vanilla JavaScript (ES6+). jQuery is becoming obsolete and adds more weight than advantage anymore.

It would make more sense to target the parent, instead of the child.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
  $('.custom-sortable').each(function(index) {
    let isCamp = false;

    $(this).find('.rank-list-item').each(function() {
      if ($(this).text() === 'Camp') {
        isCamp = true;
        $(this).addClass('custom-sortable rank-list-item-Camp');
      }
    });

    if (isCamp) {
      $(this).addClass('custom-sortable');
    }
  });
});

<!-- end snippet -->

This way you will find all of the rows that have "Camp" as the last cell, and you don't need to keep track of the index in a separate variable (that will be overwritten.) You also don't need to traverse back up the parent after finding the child.