Making jQuery persist dynamic elements

I am working in WordPress with the Woocommerce plugin trying to apply jQuery to some of the elements of the admin order page. The following code works except not as needed for the .save-action selector:

add_action( 'admin_head', 'woocommerce_admin_init' );
function woocommerce_admin_init() {
    $screen = get_current_screen();
    if ( $screen->post_type == "shop_order" ) {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".edit_address").click();
            $(".add-line-item").click();
            $(".save-action").on("click", function() {
                $(".calculate-action").click();
            });
            <?php
            if (!is_admin()) {
            ?>
            $("p.add-items span.tips").append(" - only admin can refund");
            $(".refund-items").hide();
            <?php } ?>
        });
    </script>
    <?php
    }
}

The ‘Calculate’ button with the class of calculate-action is hidden while the ‘Save’ button with the class of save-action is displayed. The Ajax already on the page by Woocommerce hides the calculate buttons after you click Add Line items and shows the Save button, then after adding items and clicking on the Save button, the calculate buttons re-appear allowing you to click to calculate totals on the page. I want to use jQuery to click the Calculate button once someone clicks on Save.

After first loading the page, this works. When I click on Save, the Calculate button fires, but it keeps firing in a loop until I click cancel. Also, after that one time, it never fires again when I click the Save button. Would anyone know how this can be done?

Hope this makes sense. Perhaps a jQuery person here knows the order page I’m talking about in Woocommerce, it is hard to paste since the related elements are dynamic.

Here is the HTML from the source, the Calculate Totals button is in this div section:

<div class="wc-order-data-row wc-order-bulk-actions" style="display: block;">
<p class="bulk-actions">
    <select>
        <option value="">Actions</option>
                        <optgroup label="Edit">
                <option value="delete">Delete selected line item(s)</option>
            </optgroup>
                    <optgroup label="Stock Actions">
            <option value="reduce_stock">Reduce line item stock</option>
            <option value="increase_stock">Increase line item stock</option>
        </optgroup>
    </select>

    <button type="button" class="button do_bulk_action wc-reload" title="Apply"><span>Apply</span></button>
</p>
<p class="add-items">
                <button type="button" class="button add-line-item">Add line item(s)</button>
                                                <button type="button" class="button button-primary calculate-tax-action">Calculate Taxes</button>
        <button type="button" class="button button-primary calculate-action">Calculate Total</button>
        </p>
</div>

And the Save button is in this div that is not displayed until the ‘Add line item’ button in the above div is clicked and then swaps ‘display: none’ to the div above, vice versa when Save is clicked:

<div class="wc-order-data-row wc-order-add-item" style="display: none;">
<button type="button" class="button add-order-item">Add product(s)</button>
<button type="button" class="button add-order-fee">Add fee</button>
<button type="button" class="button add-order-shipping">Add shipping cost</button>
<button type="button" class="button cancel-action">Cancel</button>
<button type="button" class="button button-primary save-action">Save</button>
</div>