add rows calculation and add/delete rows help

I am trying to make a invoice template that will calculate the total of each row and also be able to add rows and delete rows

I have managed to do javascript that adds new rows but I can't work out how to delete the last row added and also how to calculate each row total and then calculate all the rows total, my coding so far is below

Can anyone help please

<form method="post" action="" name="services">
                          <button type="button" onClick="addRow()">Add New Row</button>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <td><strong>Service</strong></td>
                                    <td class="text-xs-center"><strong>Service Price</strong></td>
                                    <td class="text-xs-right"><strong>Total</strong></td>
                                </tr>
                            </thead>
                            <tbody id="maindata">
                                <tr id="newservicerow">
                                    <td class="text-xs-center"><input type="text" pattern="[A-Za-z]" onkeydown="return /[a-z]/i.test(event.key)" onblur="if (this.value == '') {this.value = 'Type Letters Only';}" onfocus="if (this.value == 'Type Letters Only') {this.value = '';}" class="form-control" /></td>                              
                                    <td class="text-xs-center"><input type="number" min="0.01" step="0.01" name="form-control" class="form-control"/></td>
                                    <td class="text-xs-right">£ROW CALCULATION</td>
                                </tr>
                                </tbody>
                                <tbody>
                                <tr>
                                    <td class="highrow"></td>
                                    <td class="highrow"></td>
                                    <td class="highrow text-xs-right">Total: £CALCULATED FROM TOTAL ROWS ABOVE</td>
                                </tr>
                            </tbody>
                        </table>
                        </form>
                        <script>
                      
                        function addRow() {
      // Reference the first <tr> as row
      var row = document.getElementById('newservicerow');
      // Reference the first <tbody> as main
      var main = document.getElementById('maindata');
      // Clone row
      var clone = row.cloneNode(true);
      // Remove clone's id
      clone.removeAttribute('id');
      // Clean clone of any data
      clone.querySelectorAll('input').forEach(function(inp) {
        inp.value = ''
      });
      // Append clone as the last child of main
      main.appendChild(clone);
    }
                        </script>

HTML:

Thank you in advance

 

What you are trying to do would be much easier if you were to use a framework like jQuery to add/remove the rows.
From a UI standpoint it would be better to have a single row entry form, and to have the button save the contents to an array for calculation and display. When the rows are displayed you could add buttons to each row to edit or remove. These buttons could be tied to the the index of the array to recall the correct values to edit/remove.
You could then catch the form submit event to encode the data from the array prior to submission. (If you can't modify the backend). If you can modify the backend you could simply send the array in json format, and decode it on the backend. Let me know if you still need help with this. I have done this very same thing many times before.