Issue with button in a Html/Css table and Mysql - html

Question

I have a small problem. Right now I'm programming a website, which is connected to a mysql database.
I created a table filled with products, which are stored in the database. Each row has a Button "Add to Cart" but how do I exactly get the specific item for it? I already have the function addtoCart(string articleName) but I don't know how to get the name of the product.
This is what I've got so far:
<table id="Products">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Stock</th>
</tr>
<%
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/shop", "root", "12345");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT* FROM products WHERE category='shisha'");
while(rs.next()){
int id = rs.getInt("articleID");
String pname = rs.getString("productName");
String description= rs.getString("description");
float price = rs.getFloat("price");
int stock = rs.getInt("stock");
%>
<tr>
<td><%out.print(id);%></td>
<td><%out.print(pname);%></td>
<td><%out.print(description);%></td>
<td><%out.print(price);%></td>
<td><%out.print(stock);%></td>
<td> </td>
<td><input type="text" placeholder="How much ?" name="quantity" required> </td>
<td> <input class="button" type = "submit" value="Add to cart"> </td>
</tr>
<%
}
%>
</table>
So it generates a row for each product with its own button.... I want to call the function addtoCart(string articleName) but how do I get the product name of the row the button is in?

Answer 1

Using Jquery you could add a class and data attribute to your button, you could then get the value like so.
<input class="button" data-product="<%out.print(pname);%>" type = "submit" value="Add to cart">
$('.button').click(function(){
var product = $(this).data("product");
addtoCart(product);
});
I hope this helps.
Thanks

Answer 2

add it to the button. Instead of making the button a submit button, create a
<button onclick="addToCart(%out.print(id);%);">Add to cart</button>
then get the product information in a function called addToCart