循环中最后一项的Jquery计算会计算两次

Question

I have 5 tables that display room names and selection boxes for a guest house, where users can select the room by selecting the number of people, dinner and breakfast options. They are in a Wordpress loop.

I am using JQuery to calculate the total of the rooms and options selected. The first four selections calculate correctly and display in the grand total correctly. However, if I select the last item of the table then it calculates it twice - for example if I select one person of R600, it displays in the Grand Total as R1200. I have been debugging in the console and noticed that it loops through the last table twice. I have changed the order of how the tables are to be (ASC and DESC), and it always is the last table.

I suspect it is in the JQuery line total = val ? (parseFloat(total + val)) : total; and I log total I get the double amount for all of them.

Here is my HTML/Wordpress code

<form class="booking-form needs-validation" name="book-room-form" action="" id="contactForm" method="post" novalidate>
    <?php while ( have_posts() ) : the_post(); ?>
    <?php

        $gp_args =  array(
            'post_type' => 'page',
            'post_parent' => '30',
            'order' => 'ASC',
            'posts_per_page' => 10,
        );



        $rooms = get_posts( $gp_args );

    ?>

    <?php foreach ( $rooms as $room ) : ?>

    <table class="table room-table" id="<?php echo 'rt-' . $room->ID; ?>" class="<?php echo $room->ID; ?>" data-price-p-person="<?php echo $room_pppn_price; ?>" data-ss="<?php echo $single_supplement_price; ?>">
      <thead class="thead-dark">
        <tr>
            <th scope="col">
                <label class="form-check-label selected-label" for="room-selected">Select</label>                                                   
            </th>
        </tr>

      </thead>
      <tbody>

     <tr>                                           
        <td class="persons"> 
            <select class="browser-default custom-select num-person select-update" id="<?php echo 'r-' . $room->ID; ?>" name="number-persons-selection" required disabled>
              <option value="0" selected>Select Number of Persons</option>
              <option value="1">1 person R600</option>
              <option value="2">2 persons R800</option>
            </select>
            <div class="invalid-feedback">
              Please select number of persons
            </div>
        </td>
    </tr>
    <tr>
        <td class="dinner">
            <select class="browser-default custom-select num-dinner select-update" id="<?php echo 'd-' . $room->ID; ?>" name="dinner-selection" disabled>
              <option value="0" selected>Select Dinner Course</option>
              <option value="120">Two Course Dinner R120</option>
              <option value="200">Three Course Dinner R200</option>
            </select>
        </td>
    </tr>

     <tr>
        <td class="breakfast">
            <select class="browser-default custom-select num-bf select-update" id="<?php echo 'b-' . $room->ID; ?>" name="breakfast-selection" disabled>
              <option value="0" selected>Select Breakfast Type</option>
              <option value="70">Basic Breakfast R70</option>
              <option value="120">Full Breakfast R120</option>
            </select>
        </td>
    </tr>
    <tr class="view-total">
        <td><label for="room-total" class="tot">Total: R <input type="text" name="room-total" class="total" size="6" value="0" readonly="readonly" /></label></td>
    </tr>
    </tbody>
</table>


<?php endforeach; ?>

<div class="grand-total-cont"><label for="grand-total" class="tot">Grand Total (inclusive with number of days): R <input type="text" class="grandtotal" size="6" value="0" readonly="readonly" name="grand-total" /></label></div>

<?php endwhile; // end of the loop. ?>

<button name="submit-request" type="submit" class="btn btn-primary">Submit</button>
      <input type="hidden" name="submitted" id="submitted" value="true" />

</form>

Here is my JQuery

<script>

    $('body').on('change', '.select-update', function(e){


        $('.room-table').each(function(){

            var persons_price = $(this).data('price-p-person');
            var ss = $(this).data('ss');

            var num_persons = Number($(this).find('.num-person').val());

            console.log(num_persons);
            if(num_persons >= 1) {
                var dinner = Number($(this).find('.num-dinner').val());
                //console.log(dinner);
                var breakfast = Number($(this).find('.num-bf').val());
                var room_cost = persons_price * num_persons;

                if(num_persons == 1){
                    room_cost = room_cost + ss;
                }

                var dinner_costs = num_persons * dinner;
                var breakfast_costs = num_persons * breakfast;
                var total = room_cost + dinner_costs + breakfast_costs;
            }
            else total = 0;

            $(this).find('.total').val(total);
            $('.total').each(function(){

                val = $(this).val() | 0;

                // I suspect the issue is below
                total = val ? (parseFloat(total + val)) : total;

                console.log('this is total ' + (total + val));

            });
            var num_days = $('.date-picks').find("#days").val();
            $('.grandtotal').val(total * num_days);
        });
    });
</script>