getElementsByClassName возвращает все элементы, имеющие указанный класс, независимо от его братьев и сестер или родителя. Здесь вы можете присвоить некоторый класс родительскому классу строки:
Таким образом, структура html будет выглядеть следующим образом:
<div class="product-row">
<div class="product">
some product
</div>
<div class="price">
some price
</div>
<div class="quantity">
some quantity
</div>
</div>
Javascript:
var productRows = document.getElementsByClassName("product-row");
productRows.forEach(function(productRow){
var product = productRow.querySelector(".product");
var price = productRow.querySelector(".price");
var quantity = productRow.querySelector(".quantity");
var order = product[i].innerText +" | "+ price[i].innerText +" | "+ quantity[i].innerText;
console.log(order);
});
Я надеюсь, что это решит вашу проблему