Jquery toggle - Multiple options on the same page -

I have a problem with multiple toggles on the same page.

Actually I have included a toggle button to present the table to present some information instantly, to expand the table to present further information.

I have toggle work, but the problem was with the addition of additional tables + toggles on the same page. One thing would be that I would prefer each to be independent.

I have taken a look at similar scenarios on the sitepoint, but I do not think it seems right to click.

Javascript

& lt; Script type = "text / javascript" & gt; $ (Window) .load (function {$ ("# extension"). ('Click', function () {$ ("[data-rows = 'togglerow']"). Toggle (); $ ( This) .toggleClass ("fall");})}); & Lt; / Script & gt;

HTML

  & lt; Table id = "product-table" width = "100%" cell area = "0" cellpadding = "0" align = "center" & gt; & Lt; Tbody & gt; & Lt; TR & gt; & Lt; Td align = "center" valign = "top" width = "100%" & gt; & Lt; Table width = "100%" selection = "0" cellpadding = "4" & gt; & Lt; Tbody & gt; & Lt; Tr id = "tab" & gt; & Lt; Td square = "tabgay" colspan = "2" width = "20%" & gt; 1 & lt; / Td> & Lt; Td square = "tabbed" width = "13%" & gt; 2 & lt; / Td> & Lt; Td class = "tabbg" width = "12%" & gt; 3 & lt; / Td> & Lt; Td square = "tabbed" width = "20%" & gt; 4 & lt; / Td> & Lt; Td square = "tabbed" width = "14%" & gt; 5 & ​​lt; / Td> & Lt; Td class = "tabbg" width = "11%" & gt; 6 & lt; / Td> & Lt; / TR & gt; & Lt; Tr class = "prod-info top" & gt; & Lt; Td class = "product-title" & gt; 1 & lt; / Td> & Lt; Td square = "expansion-more" & gt; & Lt; Span id = "extension" & gt; 1 & lt; / Span & gt; & Lt; / TD & gt; & Lt; TD & gt; 1 & lt; / TD & gt; & Lt; TD & gt; - & lt; / TD & gt; & Lt; TD & gt; 2 & lt; / TD & gt; & Lt; TD & gt; - & lt; / TD & gt; & Lt; TD & gt; - & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; Table id = "product-table-bottom" width = "100%" range = "0" cells = "0" cellpadding = "0" & ​​gt; & Lt; Tbody & gt; & Lt; Tr class = "prod-info bottom" style = "display: none;" Data-rows = "togglerow" & gt; & Lt; Td class = "product-title" & gt; & Lt; One square = "button-left" & gt; 1 & lt; / A & gt; & Lt; One square = "button-left" & gt; 2 & lt; / A & gt; & Lt; One class = "button-left pdf-download" href = "#" & gt; 3 & lt; / A & gt; & Lt; / Td> & Lt; Td width = "20%" & gt; & Lt; One square = "button-right" & gt; 4 & lt; / A & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt;       
 
 text "> 
 I believe you will need to modify the button So that  expansion  should be a square, only one element on a page should have a fixed ID, but many elements can be the same class. Do you need a button in each table? 
 
 Keeping this in mind, the reason for engaging all this is because your selector is selecting everything, so you can modify it. It should not be toggle it only to get it. 
 
 My idea is that unless you reach the parents, the  parent ()  function , Then you think what you want from there. 
 
 Keeping this in mind, this should work for you. 
 
  $ (window) Load (function () {$ ("Expand"). 'Click', function () {$ (this) .Parent () .Parent ("tr [data-rows = 'togglerow']" Toggle (); $ (this) .toggleClass ("collapse");});});