Can't add total price with respect to price and quantity

I have inputs like this -

<div id="multipleEntry">
   <div class="d-flex">
     <table class="table table-borderless">
         <tbody>
           <td>
             <x-layouts.dropdowns name="product_id[]" title="Product" class="mt-2" id="productName" :dropItems="$products" :setItem="old('productName')" option1="Select Product" />
           </td>
           <td>
             <x-layouts.input name="unitPrice[]" title="Unit Price" type="number" id="unitPrice" :value="111" />
            </td>
            <td>
              <x-layouts.input name="quantity[]" title="Quantity" type="number" id="quantity" :value="old('quantity')" />
            </td>
            <td>
              <x-layouts.input name="price[]" title="Price" type="number" id="price" :value="old('price')" />
            </td>
          </tbody>

       </table>

     </div>
   </div>
   <div class="col-sm-1 mb-3" id="controls">
       <button class="btn btn-primary addNewBtn" type="button"><i class="fa-solid fa-plus"></i></button>
   </div>

and for increment of columns I used -

const addNewBtn = document.querySelector(".addNewBtn");
const multipleEntry = document.querySelector("#multipleEntry");

addNewBtn.addEventListener("click", (e) => {
    const lastRow = multipleEntry.lastElementChild;

    let clone = lastRow.cloneNode(true);
    multipleEntry.appendChild(clone);
});

I want to calculate the price and sub total price dynamically with javascript. How do I do that?