Получение атрибутов динамических данных

Я искал это и нашел ответы, очень похожие на то, что я ищу, но не совсем. Как определенный неспециалист, возможно, я не знал точно, как искать или что искать. Если это дубликат, извините.

На главной странице есть три модальных окна начальной загрузки, каждое из которых запускается тремя разными кнопками. Каждый модал просит посетителя выбрать различные варианты, чтобы надеть свой продукт для своего заказа. Когда они выбирают опцию, он закрывает модальное окно и обновляет главное окно, чтобы показать цену этой опции в их общей цене, и удаляет кнопку для запуска этого модального окна (поскольку оно уже настроено).

Большая часть этого работает, за исключением обновления компонента общей цены. Я могу заставить работать только одну из трех одновременно. Если вы выберете любой вариант (1, 2 или 3), он обновит цену правильно, но ни один из двух других вариантов не обновит общую цену. Я предполагаю, что причина в том, как я читаю и устанавливаю атрибуты данных, но я не могу понять, что я делаю неправильно. Вот код:

First Option Modal Window

<div id="addFirstOption" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add First Option</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Please choose the first option</p>
            <div id="dCalc">
            <form name="myForm" id="myForm">
                <input type='submit' name='name1' value='159.95' id='1' />
            <input type='submit' name='name2' value='169.95' id='2'/>
            </form>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Second Option Modal Window

<div id="addSecondOption" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Second Option</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Please choose the second option</p>
            <div id="dCalc">
            <form name="secondOptionForm" id="secondOptionForm">
                <input type='submit' name='name1' value='10.00' id='1' />
            <input type='submit' name='name2' value='15.00' id='2'/>
            </form>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Third Option Modal Window
<div id="addThirdOption" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Third Option</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Please choose third option</p>
            <div id="dCalc">
            <form name="thirdOptionForm" id="thirdOptionForm">
                <input type='submit' name='name1' value='212.95' id='1' />
            <input type='submit' name='name2' value='289.95' id='2'/>
            </form>
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Main Page JQuery Code

$(document).ready(function() {
    $('[data-id="addFirstOption"]').data("firstPrice", 0.00);
    $('[data-id="addSecondOption"]').data("secondPrice", 0.00);
    $('[data-id="addThirdOption"]').data("thirdPrice", 0.00);
    $('[data-id="totalprice"]').data("price", 549.95); // this price set dynamically in PHP
});

$( function() {
    $( "#dialog" ).dialog({
      autoOpen: false
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
  } );
    lightbox.option({
      'showImageNumberLabel': false
    })
    $(".addToBuildButton").click(function(){
        $("#addFirstOption").modal("show");
    });
    $(".addToBuildSecondOption").click(function(){
        $("#addSecondOption").modal("show");
    });
    $(".addToBuildThirdOption").click(function(){
        $("#addThirdOption").modal("show");
    });

$("#myForm").submit(function(e) {
    var sum = 0;
    e.preventDefault();
    $('[data-id="addFirstOption"]').append($(document.activeElement).attr('value'));
    $('[data-id="addFirstOption"]').data("firstPrice", $(document.activeElement).attr('value'));
    sum += parseFloat($('[data-id="addFirstOption"]').data("firstPrice")) + parseFloat($('[data-id="totalprice"]').data("price")) + parseFloat($('[data-id="addSecondOption"]').data("secondPrice")) + parseFloat($('[data-id="addThirdPrice"]').data("thirdPrice"));
    $(".showFinalPrice").replaceWith("$"+sum.toFixed(2));

    $( "#addFirstOptionElement" ).empty();
    $('#addFirstOption').modal('toggle');
});

$("#secondOptionForm").submit(function(x) {
    var sum = 0;
    x.preventDefault();
    $('[data-id="addSecondOption"]').append($(document.activeElement).attr('value'));
    $('[data-id="addSecondOption"]').data("secondPrice", $(document.activeElement).attr('value'));
    sum = parseFloat($('[data-id="firstOption"]').data("addFirstPrice")) + parseFloat($('[data-id="totalprice"]').data("price")) + parseFloat($('[data-id="addSecondOption"]').data("secondPrice")) + parseFloat($('[data-id="addThirdOption"]').data("thirdPrice"));
    $(".showFinalPrice").replaceWith("$"+sum.toFixed(2));

    $( "#addSecondOptionElement" ).empty();
    $('#addSecondOptional').modal('toggle');
});

$("#thirdOptionForm").submit(function(y) {
    var sum = 0;
    y.preventDefault();
    $('[data-id="addThirdOption"]').append($(document.activeElement).attr('value'));
    $('[data-id="addThirdOption"]').data("thirdPrice", $(document.activeElement).attr('value'));
    sum = parseFloat($('[data-id="firstOption"]').data("addFirstPrice")) + parseFloat($('[data-id="totalprice"]').data("price")) + parseFloat($('[data-id="addSecondOption"]').data("secondPrice")) + parseFloat($('[data-id="addThirdOption"]').data("thirdPrice"));
    $(".showFinalPrice").replaceWith("$"+sum.toFixed(2));

    $( "#addSThirdOptionElement" ).empty();
    $('#addControlModal').modal('toggle');
});

Он визуально добавляет параметры цены на главный экран из того варианта, который был выбран первым, но после этого он только визуально добавляет цены на главный экран и не будет обновлять промежуточную сумму, хранящуюся в элементе данных «общая цена».

Я собираюсь об этом в дурацком пути? Что мне не хватает? Пожалуйста помоги!!!!