I am working on a permissions page on my site and currently have it sets up with three columns `Username` `Permissions` and `Action`. When I press the `Edit` button in the `Action` column I want to be able to edit the `Permissions` column only in that specific row. Right now I have it setting both the `Username` and `Permissions` cell to be contenteditable. 

Here is is my definition of my table (data being pulled from DB):

```
echo "<td class='username'>" . $row['username'] . "</td>";
echo "<td class='permissions'>" . $row['isAdmin'] . "</td>";
echo "<td><input type='button' class='btn btn-primary edit' value='Edit'></td>"

```

And Here is the script I am currently using to change *each column in the row*:

```
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function () {
    return $(this).find('.edit').length === 0;
});
//console.log(tds);
if ($this.val() === 'Edit') {
   $this.val('Save');
   if($this.id !== '.edit') {
       tds.prop('contenteditable', true);
   }
}

```

I need it to only select the `<td class='permissions'>` in the current row that the button was clicked on. 

What is the proper way to select only that cell in the corresponding row?

I've tried multiple ways to try and only select it from tds based on the class but have had no success.