I am creating a website and there are some pages containing the `<div>` tags as the wrapper of `<table>`. A `<tr>` of each table contains a `<form>` and another `<tr>` contains some `<a>` tags. I am using these anchor tags to make buttons just to add hide and show functionality. Whenever some new data is fetched from database, the set of said `html` structure is created dynamically. Every `<div>` contains the same `id` and every `<tr>` also containing the `<form>` assigned the same `id`. Below is my example `html`for the better explanation.

**HTML**

```
<div class='static_archive'>   // First Wrapper
   <table>
      <tr>
         <td>Some data</td>
         <td>Some data</td>
         <td>
            <a id='show_hide_details' href='#'>Show/Hide Button</a>
         </td> 
      </tr>

      <tr id='form_container'> 
         <td colspan='3'>
            <form>
               <input type='text' name'first' />
               <input type='text' name'second' />
               <input type='text' name'third' /> 
            </form>
         </td> 
      </tr>  
   </table>
</div>

<div class='static_archive'>  // Second Wrapper
   <table>
      <tr>
         <td>Some data</td>
         <td>Some data</td>
         <td>
            <a id='show_hide_details' href='#'>Show/Hide Button</a>
         </td> 
      </tr>

      <tr id='form_container'> 
         <td colspan='3'>
            <form>
               <input type='text' name'first' />
               <input type='text' name'second' />
               <input type='text' name'third' /> 
            </form>
         </td> 
      </tr>  
   </table>
</div>

```

**jQuery**

```
$(document).ready(function(){

     $("#form_container").hide();

     $("#show_hide_details").click(function(){

          $("#form_container").toggle();

     });      
});   

```

As soon as the page loads, `$("#form_container").hide();` hides all the `<tr>` containing the `<form>`. By clicking `hide/show` button with the toggle effect, hides and shows the every content with the same id.

I want to show only one `form` at a time when a particular button is `hide/show` button is pressed. How can i control such behavior?

With a new record fetched, a new `DIV` is created with only one table inside it. And the table contains only one form. The table row containing the form needs to be hide/show.

Here is the jsfiddle with my code structure [jsfiddle](http://jsfiddle.net/5U6KQ/1/)

Every clicked `hide/show` should effects the respective form.

I have edited my post. Please have a look now.