Как отобразить значение массива в таблице другой строки столбца с тем же селектором <td>

Question

У меня есть таблица с кнопкой добавления для создания новой строки, в каждой строке есть 3 столбца с именем количество, цена за единицу и общее количество. Я хочу отображать произведение каждого (количество * цена за единицу) на общий столбец каждый раз, когда я нажимаю общая кнопка.

$(document).on('click','#equals',function(e){
    e.preventDefault();
    var quantity = [];
    var unitPrice = [];
    // var total = [];

    $('.quantity').each(function(){
        quantity.push($(this).text());
    });
    $('.unit-price').each(function(){
        unitPrice.push($(this).text());
    });
    console.log(quantity);
    console.log(unitPrice);

    var product = [];
    for(var i = 0; i < quantity.length; i++){
       product = quantity.map((a, i) => a * unitPrice[i]);
    }

    for(var i = 0; i < product.length; i++){
       $('.total').each(function(){
            $('.total').text(product);
        });
    }

    console.log('Product of every quantity * unit price of every row: ', product);