jQuery show/hide issue on data grid

I am facing a problem with the data gird. I have three to开发者_Go百科 four datagrid one below the other and for each grid i have action buttons[select/del/copy/add] which i showing and hiding using jquery.

Each data grid has different id and show and hide controlled through jquery. But when i am clicking the first grid the next grid is also showing the control eventhough it has a different id.

I understand there is something advanced jquery scripting involved here, would be of great help if someone looks into this.

http://jsfiddle.net/pixelfx/3fwyf/16/

thanks, ravi.

The problem is that you are toggling both groups of buttons..

If your html is structure as your example then you should remove those two toggles

$('#actn_btns').toggle();
$('#actn_btns1').toggle();

and add $(this).closest('table').next().toggle(); in their place.

example at http://jsfiddle.net/3fwyf/19/

On another issue, you have duplicate id elements on the tables. Don't do that..

Update

the .closest() works like this

Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.

The .minus and .add are not ancestors. So we need to first go up to a place where the .child and .minus elements are children to the current node and then go downwards and find them.

$(this).closest('tr').find('.minus, .add').toggle();

you should use the .next() jquery function to only select the next set of buttons to display