html - Appending the table using jquery multiple times -

this jquery functions

var status;  $('.status').click(function(e) {      status= $(this).attr('id');                          //$('#test').html('<p>scrolled: '+ status +'</p>');                      callajax();      display(); });   

this function above gets id of hyper reference clicked , stores in variable. , call other function.

 var id = [];  var values = [];  function callajax(){                  id = [];      values = [];      $("#"+ status +"> td").each(function(index){                      id.push($(this).attr("id"))      values.push($(this).text());      //alert($(this).attr("id")+" "+$(this).text());                             });            } 

this function above retrives values row , stores in array.using array values create new table , display below hyperlink clicked (whose div stored status variable)

  function display(){                            $("#"+status).append('<table id="newtable" border="1"> <tr> <td>'+values[0]+'</td><td>'+values[1]+'</td></tr></table>');   } 

in display() function when first time appending table working fine, when again link clicked appends 1 more table.

output

here when click on link first time displays table correctly, when click same link appending same table , second problem when click on other link first table should disappeared.

help...

try one

function display(){         $("#newtable").remove();   //removes table tag             $("#"+status).append('<table id="newtable" border="1"> <tr> <td>'+values[0]+'</td>                             <td>'+values[1]+'</td></tr></table>');     }