title: insert table inside div between two rows
body: <pre><code>&lt;div &gt;
  &lt;table id="hidn"&gt;
     &lt;tr&gt;
         &lt;td&gt;&lt;label&gt;Sl no.&lt;/label&gt;&lt;input type="text" class="clear"/&gt;&lt;/td&gt;
         &lt;td&gt; &lt;label&gt;name&lt;/label&gt;&lt;input type="text" class="clear"/&gt;&lt;/td&gt;
         &lt;td&gt;&lt;label&gt;address&lt;/label&gt;&lt;input type="text" class="clear"/&gt;&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/table&gt;
   &lt;input type="button" value="add"/&gt;
      &lt;input type="button" id="buttonAwd" value="close"/&gt;
  
  &lt;div&gt;
  &lt;table id="tab" border="1"&gt;
  &lt;tr&gt;
      &lt;td&gt;sl no.&lt;/td&gt;
      &lt;td&gt;College&lt;/td&gt;
      &lt;td&gt;address&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;NIT&lt;/td&gt;
      &lt;td&gt;tripura&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="add student" id="button1" class="butnEvn"/&gt;
      &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;NIIT&lt;/td&gt;
      &lt;td&gt;delhi&lt;/td&gt;
      &lt;td&gt;&lt;input type="button" value="add student" class="butnEvn" id="button3"/&gt;
      &lt;/td&gt;
   &lt;/tr&gt;
      &lt;/table&gt;
  
  $(document).ready(function(){
  $(".butnEvn").live( "click", function(){
  
    $("#hidn").slideDown("slow");
  });
  
  $("#buttonAwd").live( "click", function(){
  $("#hidn").slideUp("slow",function(){
  $(".clear").val('');
  });
  });
  });
  </code></pre>
  
  <p>Fiddle <a href="http://jsfiddle.net/rQZX7/12/" rel="nofollow">http://jsfiddle.net/rQZX7/12/</a> check this link. I want to dynamically add that textbox values inside a div and place after each table row of main table which can be toggle and viewed. Please find a solution for me.</p>
  
  <p>I have tried with index to insert new row for alternative row.</p>