Javascript calls by link or button inside of a table won't work beyond first row

For whatever reason, after calling consecutive ajax requests to re-populate an HTML table, the links in the first row of the table work and call Javascript functions, but any row thereafter the links or buttons no longer work.

On a webpage, I have a table on the right that has several links, and when you click any of them it calls a Javascript function that uses an ajax requests to populate the table again, this time with separate items and links. In this second table, none of the links or buttons work after the first row. I've attached the relevant segments of code, I'd really appreciate any help!

<form id="mylists" name="mylists">
<div id="table" style="overflow: auto; height: 250px; width: 250px;">
   <table id="myplaylists" cellspacing="0" cellpadding="2" width="225px" style="position: relative; left: -7%;">
      <tr height='8px'><td><a href='javascript:getUserPlaylist(0)'>title</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(1)'>title1</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(2)'>title2</a></td></tr>
          <tr height='8px'><td><a href='javascript:getUserPlaylist(3)'>title3</a></td&开发者_StackOverflowgt;</tr>
         </table>
</div>
</form>

The Javascript function:

function getUserPlaylist(id)
{
var request;
var table = document.getElementById("table");

try {
    request = new XMLHttpRequest(); /* e.g. Firefox */
    } 
catch(e) {
      try {
      request = new ActiveXObject("Msxml2.XMLHTTP");  /* some versions IE */
      } catch (e) {
        try {
        request = new ActiveXObject("Microsoft.XMLHTTP");  /* some versions IE */
        } catch (E) {
         request = false;
        } 
      } 
 }

request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200)
    {
        table.innerHTML = "";
        table.innerHTML = request.responseText;
    }
};

request.open("GET", "user_playlists.php?display=" + id, true);
request.send();
}

And the PHP file:

$display = $_GET['display'];
$query = "SELECT item, title FROM Playlists WHERE playlistID = '$display'";
    $result = mysql_query($query);
    $numr = mysql_num_rows($result);

    if($numr > 0)
    {
        $row = mysql_fetch_array($result, MYSQL_ASSOC);
        $item = $row['item'];
        $title = $row['title'];
        $temp = explode(",", $item);
        $items = array();

        echo "<table id='myplaylists' cellspacing='0' cellpadding='2' width='225px' style='position: relative; left: -7%;'>";
        echo "<tr height='8px' scope='col'><td><b>$title</b>&nbsp;<a href='javascript:editPlaylist($display)'>add</a></td></tr>";

        foreach ($temp as $id)
        {
            $query = "SELECT title FROM Info WHERE ID = '$id'";
            $result = mysql_query($query);
            $numr = mysql_num_rows($result);

            if ($numr > 0)
            {
                $row = mysql_fetch_array($result, MYSQL_ASSOC);
                $title = $row['title'];

                echo "<tr height='8px' scope='col'>";
                echo "<td><a href='javascript:editPlaylist($id)'>$title</a></td>";
                echo "<td><input type='button' value='x' onclick='remove($id)' /></td></tr>";
            }
        }

        echo "</table>";
    }
    else {
        echo "Error finding requested playlist.";
    }
}

Edit: This is the responseText from the ajax request for the second table:

<table id='myplaylists' cellspacing='0' cellpadding='2' width='225px' style='position: relative; left: -7%;'>
  <tr height='8px' scope='col'><td><b>playlist2</b>&nbsp;<a href='javascript:editPlaylist(4025199)'>add</a></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(6)'>Duck Sauce</a></td><td><input type='button' value='x' onclick='remove(6)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(O)'>Young, Wild and Free</a></td><td><input type='button' value='x' onclick='remove(O)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(9)'>No Sleep</a></td><td><input type='button' value='x' onclick='remove(9)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(R)'>The Show Goes On</a></td><td><input type='button' value='x' onclick='remove(R)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(s)'>Waka Flocka Flame</a></td><td><input type='button' value='x' onclick='remove(s)' /></td></tr>
  <tr height='8px' scope='col'><td><a href='javascript:editPlaylist(U)'>Roll Up</a></td><td><input type='button' value='x' onclick='remove(U)' /></td></tr>
</table>

---

In your table you are missing opening <tr> tags:

<tr height='8px'><td><a href='javascript:getUserPlaylist(0)'>title</a></td></tr>
<td><a href='javascript:getUserPlaylist(1)'>title1</a></td></tr>
<td><a href='javascript:getUserPlaylist(2)'>title2</a></td></tr>
<td><a href='javascript:getUserPlaylist(3)'>title3</a></td></tr>

You need an extra <tr> at the beginning of the 3 other lines too:

<tr height='8px'><td><a href='javascript:getUserPlaylist(0)'>title</a></td></tr>
<tr><td><a href='javascript:getUserPlaylist(1)'>title1</a></td></tr>
<tr><td><a href='javascript:getUserPlaylist(2)'>title2</a></td></tr>
<tr><td><a href='javascript:getUserPlaylist(3)'>title3</a></td></tr>

HTH.