I have this dynamic input fields table with dynamic add / remove rows and it works great,
i like to add other dropdowns and also instead of having a number in value attribute like i had before i like to make value as an object that holds multiple variable and calculate everything to multiple results (Totals)

<button id="btn-add-row">Add new row</button>
<table id="my-table">
  <thead> <tr><th>Quantity</th><th>Price</th><th>Total</th><th></th></tr> </thead>
  <tbody> </tbody>
  <tfoot> <tr><td colspan="3"> TOTAL = <input type="text" name="anstotal" value="0" readonly></td><td></td></tr> </tfoot>
</table>

<template id="template-row">
  <tr> 
    <td> <input type="number" name="qty" value="0" min="0"> </td>
    <td>
      <select id="prod_list" name="sel" >
        <option value="0" disabled selected>Choose a price</option>
        <option value="product_first_price">Product one</option>
        <option value="product_second_price">Product two</option>
        <option value="product_third_price">Product three</option>
      </select>      
    </td>
    <td> <input type="text" name="total" value="0" readonly> </td>
    <td> <button name="delete-row">Delete</button> </td>
  </tr>
</template>

     <td>
      <select id="prod_list" name="sel" >
        <option value="0" disabled selected>Choose a price</option>
        <option value="products4_prices">Product one</option>
        <option value="products5_prices">Product two</option>
        <option value="products6_prices">Product three</option>
      </select>      
    </td>

<div class="produc_total">
        <div>
          Pencil:
          <span id="pencil" ></span>
        </div>
        <div>
          Ruler:
          <span id="ruler"></span>
        </div>
        <div>
          Highlighter:
          <span id="highlighter"></span>
        </div>
      </div>
    </div>


const 
  myTable_tBody = document.querySelector('#my-table tbody')
, templateRow   = document.querySelector('#template-row')
, myTable_Total = document.querySelector('#my-table tfoot input[name="anstotal"]')
  ;
AddNewRow(); // first attempt

document.querySelector('#btn-add-row').addEventListener('click', AddNewRow);

myTable_tBody.addEventListener('input', setTotals);

myTable_tBody.addEventListener('click', e =>
  {
  if (!e.target.matches('button[name="delete-row"]')) return;
  e.target.closest('tr').remove();
  setTotals();
  });

function setTotals()
  {
  let Total = 0;
  [...myTable_tBody.rows].forEach( r => 
    {
    let inTotal = r.querySelector('input[name="qty"]').valueAsNumber
                * +r.querySelector('select[name="sel"]').value;

    r.querySelector('input[name="total"]').value = inTotal;
    Total += inTotal;
    });
  myTable_Total.value = Total;
  }
  
function AddNewRow()
  {
  if (myTable_tBody.rows.length < 4)
    myTable_tBody.append( document.importNode(templateRow.content, true) );
  else
    alert("Maximum Passenger per ticket is 4.");
}

function calc() {
  var pencil = 0;
  var ruler = 0;
  var highlighter = 0;
  var select_val = 0;

$("#template-row select#prod_list").each(function () {
    select_val = this.value;
    switch (select_val) {
      case "product_first_price":
        pencil += 10;
        ruler += 11;
        highlighter += 13;
       break;
      case "product_second_price":
        pencil += 14;
        ruler += 16;
        highlighter += 17;
       break;
      case "product_third_price":
        pencil += 18;
        ruler += 19;
        highlighter += 20;
       break;
      default:
        select_val += 0;
    }
  });

  $("#pencil").text(pencil);
  $("#ruler").text(ruler);
  $("#highlighter").text(highlighter);
 

}

i tried to assigne a variable to the value in select option i used a switch case statement but it doesn’t seem to work. maybe there is an easier way.