Добавить в обьект все значения класса и перемножить их со всеми совпадающими id

Подскажите пожалуйста, как правильно будет перемножить кол-во проданных блюд на каждый из ингридиентов. Первая колонка - список товаров с кол-вом заказов за месяц.(выводятся сумма каждого в контейнее с id товара) Вторая колонка - рецепты для каждого из этих товаров выведены в столбик.(выводятся списком с именем класса соотв. блюда, для веса каждого из ингридиентов) Допустим:

Товар:  Багет - <span id="1">234</span>шт
Состав: Вода - <span class="1">0.2</span>г
        Мука - <span class="1">0.3</span>г
        Соль - <span class="1">0.4</span>г

Собираю кол-ва проданных товаров в массив и пытаюсь выбрать все ингридиенты

let leftblock = [];
let rightblock= {};
let test = [];
for(let i = 0; i <= 100; i++){
  test[i] = $("#"+i).text();
    if(test[i]>0){
      leftblock[i] = test[i];
    };
};
  for(let i = 0; i <= 500; i++){
   $("."+i).each(function(){
   test[i] = $(this).text();
        
});
    if(test[i]>0){
      rightblock[i] = test[i];
    };
  };

Дальше ступор, т.к. выборка ингридиентов не полная, а только последнее значение. Помогите сдвинуться с места)


Ответы (1 шт):

Автор решения: OPTIMUS PRIME

Если в коде начинаются нумерованные классы / id, значит что-то идет не так!)
Каждый рецепт можно завернуть в отдельный блок, а внутри него уже играться с его элементами:

let data = [];
let recipes = document.querySelectorAll(".recipe");

recipes.forEach(function(recipe, i) {
  let sold = Number( recipe.querySelector(".sold-qty").textContent );
  // Из textContent прилетает строка.
  // Если ожидается число, хорошо бы его пораньше превратить именно в число.
  
  data.push([]);
  let ingredients = recipe.querySelectorAll(".ingredient");
  ingredients.forEach(function(ingredient) {
    let result = Math.round( sold * ingredient.textContent * 100 ) / 100;
    // result - уже какое-то число (округленное до двух знаков после запятой),
    // которое можно где-то использовать. Например, так:
    
    data[i].push( result );
    ingredient.insertAdjacentHTML("beforeEnd", ' <span class="bubu">(' + result + ')</span>');
  });
});

console.log( data[0][2] ); // Первый рецепт, Третий ингредиент
.recipe {
  white-space: pre-line;
}

.bubu {
  color: red;
}
<div class="recipe">
  Товар:  Багет - <span class="sold-qty">234</span>шт
  Состав: Вода - <span class="ingredient">0.2</span>г
          Мука - <span class="ingredient">0.3</span>г
          Соль - <span class="ingredient">0.4</span>г
</div>

<div class="recipe">
  Товар:  Макарошки - <span class="sold-qty">204</span>шт
  Состав: Вода - <span class="ingredient">1000</span>г
          Макароны - <span class="ingredient">100</span>г
          Соль - <span class="ingredient">10</span>г
</div>

→ Ссылка