无法从PHP获取ID到AJAX

Question

I am trying to build an E-commerce website using PHP and AJAX but I am facing problem when I try to delete items from the cart. I am fetching the cart data from the cart table that is in my database. The fetched data code is shown below. (Please don't care about the variables, they are all in the code I am not pasting here)

echo "<tr>
       <td class='p-image'>
        <a href='product-details?id=$fetchProductID'><img alt='' src='$theRealLink'></a>
       </td>
       <td class='p-name'><a href='product-details?id=$fetchProductID'>$theName</a></td>
       <td class='p-amount'>INR $fetchProductUnitPrice</td>
       <td class='p-quantity'><input maxlength='100' type='text' value='$fetchProductQuantity' name='quantity'></td>
       <td class='p-total'><span>INR $fetchedProductTotal </span></td>
       <td class='edit'><a href='javascript:void(0)' id='delete-from-cart' data-id='$fetchProductID'><img src='assets/img/icon/delte.png' alt=''></a>
       </td>
     </tr>";

Whenever someone presses the button with the ID of delete-from-cart, I run the javascript code that fetched the ID of the product to be deleted from data-id attribute. The code is below

$('#delete-from-cart').click(function() {
    var deleteID = $(this).attr('data-id');
    alert(deleteID);
});

Just alerting for now. The real problem is, say my cart have 3 different items, so I get 3 different buttons to delete them but only the button of the first item in the cart is working i.e. An alert is displayed containing the ID of the product to be deleted.

I am wondering that why only the first button is working and rest all are not working at all ?