Toggle class of button in specific row only

Question

I am trying to toggle a class that hides an edit button when it's clicked and unhides a save and cancel button. These are being populated in a table so each row has it's own set of edit, save, and cancel buttons. Currently, when I click on the edit button it hides all edit buttons in the table and shows all save and cancel buttons. I am trying to make it so that only the set of buttons on a specific row gets toggled.

The table is being populated from a query:

foreach ($queryResult as $retrieved_data) {
    $content .= "<tr id=\"id_$retrieved_data->id\">
                    <td id=\"td_id\">$retrieved_data->id</td>
                    <td id=\"td_name\">$retrieved_data->posname</td>
                    <td id=\"td_month\">$retrieved_data->month</td>
                    <td id=\"td_year\">$retrieved_data->year</td>
                    <td id=\"td_avail\">$retrieved_data->availableinv</td>
                    <td id=\"td_max\">$retrieved_data->maxinv</td>
                    <td id=\"td_edit\"><button type=\"button\" class=\"editImpressionsBtn\" id=\"editImpressionsBtn\" value=\"Edit\">Edit</button></td>
                    <td id=\"td_save\"><button type=\"button\" class=\"saveImpressionsBtn hide\" id=\"saveImpressionsBtn\" value=\"Save\">Save</button></td>
                    <td id=\"td_cancel\"><button type=\"button\" class=\"cancelImpressionsBtn hide\" id=\"cancelImpressionsBtn\" value=\"Cancel\">Cancel</td>
                </tr>";
}
return $content;

I currently have the following code to handle the event:

jQuery('#positionImpressions').on('click', '#editImpressionsBtn', function() {
    var row = jQuery(this).closest('tr');
    var id = row.find('#td_id').text();
    var max = row.find('#td_max').text();
    var available = row.find('#td_avail').text();
    console.log(id + ', ' + max + ', ' + available);
    jQuery('.editImpressionsBtn').toggleClass('hide');
    jQuery('.saveImpressionsBtn').toggleClass('hide');
    jQuery('.cancelImpressionsBtn').toggleClass('hide');

    var maxBox = row.find('#td_max');
    maxBox.empty().append('<input type="text" id="newMax" value="'+max+'"></input>');
});

I've tried to access the row then find the column that holds the button like this but it didn't seem to work:

row.find('#td_edit').toggleClass('.editImpressionsBtn', 'hide');
row.find('#td_save').toggleClass('.saveImpressionsBtn', 'hide');
row.find('#td_cancel').toggleClass('.cancelImpressionsBtn', 'hide');

The row variable is the row that the action is being performed on. but that didn't seem to work. Any advice would get greatly appreciated.

Here is how I got it working. In the table I now have all three buttons in the td_edit so that when the edit button is hidden there isn't empty space in that column:

<td id=\"td_edit\">
    <button type=\"button\" class=\"editImpressionsBtn\" id=\"editImpressionsBtn\" value=\"Edit\">Edit</button>
    <button type=\"button\" class=\"saveImpressionsBtn hide\" id=\"saveImpressionsBtn\" value=\"Save\">Save</button>
    <button type=\"button\" class=\"cancelImpressionsBtn hide\" id=\"cancelImpressionsBtn\" value=\"Cancel\">Cancel</button>
</td>

Then in my jQuery to access the buttons class I wanted I have this:

row.find('#td_edit').find('.editImpressionsBtn').toggleClass('hide');
row.find('#td_edit').find('.saveImpressionsBtn').toggleClass('hide');
row.find('#td_edit').find('.cancelImpressionsBtn').toggleClass('hide');

Answer 1

Click callback gets an event argument which has a property event.target .. This property contains the element, which triggered the event.. use jQuery to retrieve parent element of that target element to get the clicked row and apply those selectors you already have only on this row and not on the whole document ...

EDIT: It has been a long time since I touched jQuery so this might need some polishing, but you could try it this way:

// here we need to call parent() twice, because button's parent is a 
// 'td' element and we need to get to 'tr' which is one level up
var row = jQuery(event.target).parent().parent()
row.find('#editImpressionsBtn').toggleClass('hide');
row.find('#saveImpressionsBtn').toggleClass('hide');
row.find('#cancelImpressionsBtn').toggleClass('hide');