need total amount displayed of data-price attribute from each table

I'm not 100% on Javascript and got bit stuck on a feature I am trying to do. I want to display the total amount of data-price attribute. The code I currently have is below, sorry it's quote long code. The code currently works so when I click add to list, it adds the service name and cost to a table below and the same for the part name and cost table which is all good. I just need to somehow get the total amount from each table row of both service and part table and display the amount below the tables. I'm sure Javascript code can do what I need but I'm unsure what the code should be, can anyone help please

<div class="row">
<div class="form-group col-md-9 servicename">
<select id="service" name="service" class="form-control servicelist">
<option value="">Select Service</option>
<option data-price=1.00 value='Service 1'>Service 1</option>
<option data-price=2.00 value='Service 2'>Service 2</option>
</select>
</div>
<div class="col-md-3">
<input type="text" name="Price" class="form-control form-control-border text-right price-input-service" readonly>
</div>
</div>
<div class="row">
<input type="button" value="Add To List" class="btn btn-primary submit1" id="submit1" />
</div>

<div class="row">
<div class="form-group col-md-9 partname">
<select id="part" name="part" class="form-control partlist">
<option value="">Select Part</option>
<option data-price="0.00" value="None Needed">None Needed</option>
<option data-price=1.00 value='Part 1'>Part 1</option>
<option data-price=2.50 value='Part 2'>Part 2</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control form-control-border text-right price-input-part" readonly>
</div>
</div>
<div class="row">
<input type="button" value="Add To List" class="btn btn-primary submit2" id="submit2" />
</div>
<div class="row">
<table id="table1" class="table table-stripped table-bordered mt-3">
<colgroup>
<col width="65%">
<col width="25%">
</colgroup>
<thead>
<tr class='bg-gradient-dark text-light'>
<th>Service Name</th>
<th>Service Cost</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table id="table2" class="table table-stripped table-bordered mt-3">
<colgroup>
<col width="65%">
<col width="25%">
</colgroup>
<thead>
<tr class='bg-gradient-dark text-light'>
<th>Part Name</th>
<th>Part Cost</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="row">
<div class="col-lg-12">
TOTAL AMOUNT HERE (WANT TO HAVE TOTAL AMOUNT OF EACH TABLE ROW FROM BOTH TABLE 1 AND 2 DISPLAYED HERE)
</div>
</div>
<script>
            $("#submit1").click(function() {
                {
                    var selected = $('.servicelist');
                    selected.each(function() {
                        $('#table1').append('<tr><td>' + $(this).val() + '</td>' + '<td>' + $('#service option:selected').attr('data-price') + '</td></tr>');
                    });
                }
            });
        </script>
        <script>
            $("#submit2").click(function() {
                {
                    var selected = $('.partlist');
                    selected.each(function() {
                        $('#table2').append('<tr><td>' + $(this).val() + '</td>' + '<td>' + $('#part option:selected').attr('data-price') + '</td></tr>');
                    });
                }
            });
        </script>
        <script>
            $('.servicename').on('change', function() {
                $('.price-input-service')
                    .val(
                    $(this).find(':selected').data('price')
                );
            });
        </script>
        <script>
            $('.partname').on('change', function() {
                $('.price-input-part')
                    .val(
                    $(this).find(':selected').data('price')
                );
            });
        </script>

Code (markup):

 

Thank you but that's where I get stuck as not 100% sure. Would the element to show the totals be something like <div id="total"></div>

It's the other part I'm not sure regarding the totals to be incremented and update the elements

 

I have just managed to solve this issue