Um das zu erweitern, was @Logan Wayne betont hat...
Wenn Sie also in Ihrem JavaScript Verweise auf Ihre Tabellendatenelemente abrufen, erhalten Sie immer die ERSTE Instanz eines Document-Objekts mit der von Ihnen angegebenen ID.
// 2. Define what to do when XHR feed you the response from the server - Start
var product = document.getElementById("product").value; <-- will always return the same element
var pp1 = document.getElementById("pp1").value; <-- will always return the same element
var rp1 = document.getElementById("rp1").value; <-- will always return the same element
var stacking = document.getElementById("stacking").value; <-- will always return the same element
Sie müssen Ihren td-Objekten entweder eindeutige IDs zuweisen oder, wie @Logan Wayne erwähnte, die Klasseneigenschaft von HTML-DOM-Objekten verwenden.
Klassen können verwendet werden, um ähnliche Elemente zu gruppieren. Nachdem Sie den verschiedenen Spalten in Ihrer Tabelle Klassennamen zugewiesen haben (Produkt , Aktionspreis , Regulärer Preis , Stapeln ) können Sie getElementsByClassName() verwenden um ein Array der td-Elemente zu erhalten.
...
var products = document.getElementsByClassName("product"); <-- array of product td elements
...
