I searched but did not find, I want to implement something but unfortunately do not get it.

There are small components

1. How do I change the value of the position by 1 each time I add a new row.

2. How do I access the contents of the input fields without using a button? As an example, I want to display quantity * price and the value at total per row, it should work directly after the input, without using a button.

        var table = document.getElementById("lineitems");
        var row = table.insertRow();
        var total = 0.00;
        var cell = row.insertCell();

  
        cell.innerHTML = '<input type="text" class="form-control" id="position"  name="position[]" value="1">';
        cell = row.insertCell();
        cell.innerHTML = '<input type="text" class="form-control" id="service"  name="service[]" placeholder="Produkt oder Service eingeben"><br><textarea class="form-control" name="description[]" rows="1" placeholder="Beschreibung"></textarea>';
        cell = row.insertCell();
        cell.innerHTML = '<input type="text" id="quantity"  class="form-control"  name="quantity[]" value="1">';
        cell = row.insertCell();
        cell.innerHTML = '<input type="text" class="form-control" id="unit"  name="unit[]" placeholder="Einheit">';;
        cell = row.insertCell();
        cell.innerHTML = '<input type="text" class="form-control" id="price" name="example-text-input" name="price[]" placeholder="0,00">';
        cell = row.insertCell();
        cell.innerHTML = total;   
    }