检索要添加到购物车的行ID PHP

Question

I'm trying to add items to the basket but to do so I need to retrieve the row id which isn't happening at the moment.

Here's what I have so far for my table with the href:

<div class="row col-md-8 col-md-offset-2 custyle">
    <div id="response"></div>
     <div id="cat0"><h2>Starters</h2></div>
<table class="table table-striped custab" id="menu-table">
<thead>
    <tr>
        <th>Item</th>
        <th>Description</th>
        <th>Price</th>
        <th class="text-center">Action</th>
    </tr>
</thead>
        <tdata>
<?php
// output data of each row

foreach ($starters as $row) { ?>
            <tr><td style="width:30%;"><b><?php echo $row['product_name'] ?></b></td>
            <td style="width:40%;"><?php echo $row['description'] ?></td>
           <td style="text-align: center">£<?php echo $row['price'] ?></td>
            <td class="text-center"> <a href="customerHome.php?id=<?php echo $row['productid'] ?>" id="basketButton" value="Add To Basket"><span class="glyphicon glyphicon-plus"></span> </a></td></tr>
               <input type="hidden" name="pid" value="<?php echo $row['productid'] ?>" />
                <?php
}
?>
</tdata>

</table>
</div>  

and this is the javascript:

   $(document).ready(function(){

   $(document).on('click', '#basketButton', function(e){

    e.preventDefault();


    var pid = $(this).closest("tr").find(".nr").text(); // get id of clicked row


   $.ajax({
      url: 'basket.php',
      type: 'POST',
      data: 'id='+pid,
      dataType: 'html'
   })
   .done(function(data){
      console.log(data); 

   })


  });
}); 

    </script>  

And this is the php code for the $starters variable:

function getProductsCat($category){
  include('database.php');
  $query = "SELECT * FROM products WHERE category = :category";
  $stmt = $db->prepare($query);
  $stmt->bindParam(':category', $category);
  $stmt->execute();
  $result = $stmt->fetchAll();
  return $result;
 }

Can't seem to retrieve the row id, can anyone see where I went wrong? Thanks!