javascript - Jqueryで独立して作業するdiv

Question

内部にフォームを持つ、独立して動作する div を作成しようとしています。

フォームでのユーザーの選択に応じて、jquery を使用して製品の価格を計算します。ただし、ユーザーは「カート」に複数のアイテムを追加できるため、フォームは別の div に複製されます。問題は、計算パターンがこれら 2 つの div を分離できず、計算が正しくないことです。フォームもインタラクティブなので、ユーザーの入力によって生成されます。これは非常に複雑なセットであり、「製品番号」ですべての変数の名前を変更することは、私にはあまり効率的ではないように思えます。

私はここで立ち往生していて、この問題を解決する方法が本当にわかりません。div 内に iframe を配置し、その中にフォームとその計算スクリプトをロードしてから、post コマンドを使用して製品の価格を「メイン ページ」に転送し、合計価格を計算するとどうなるかという考えがありました。ユーザーが望んでいたすべての製品の。

ただし、jQuery スクリプトはこれらの iframe 内で独立して動作しないようです。それらはまだ接続されているため、互いに壊れています。

この問題を解決するためのあらゆる種類の提案と支援に感謝します。ありがとう!

これがこれまでのコードです

本体はこちら

var productNumber = 1;

<div id="div_structure">

</div>
<button id="newProduct" >Add new product</button><br \>

新しいアイテムを追加

<!-- language: lang-javascript -->

    $('#newProduct').click(function () 
    { 
        $('<div id="productNo'+productNumber+'">')
         .appendTo('#div_structure')
         .html('<label onclick="$(\'#div_productNo'+productNumber+'\').slideToggle()">Product '+productNumber +' </label>'+
               '<button onclick="$(\'#product'+productNumber+'\').remove()">Remove</button>');
        $('<div id="div_product'+productNumber+'" style="display: none;">').appendTo('#product'+productNumber+'');
$('<iframe src="productform.html" seamless frameborder="0" crolling="no" height="600" width="1000">').appendTo('#div_product'+productNumber+'');
        productNumber++;
    });

また、ユーザーが挿入された div を削除できる機能もあります。

これは製品フォームからのほんの数行です

$(document).ready(function()
{
    $('#productCalculation').change(function () 
    {
        shape = $('input[name=productShape]:checked', '#productCalculation').val();
        alert(shape);
    });
});

<form id="productCalculation">
<div id="div_productShape" class="product1">
<h1>Select the shape of the product</h1>
    <input type="radio" name="productShape" value="r1">R1</input><br \>
    <input type="radio" name="productShape" value="r2">R2</input><br \>
    <input type="radio" name="productShape" value="r3">R3</input><br \>
</div>
.
.
.
</form>

すべての変数を翻訳したので、翻訳されたバージョンをテストしていないため、正しく機能しない可能性があります。問題は、2番目に生成されたdivで選択しようとするとalert()、選択された変数でさえもうまくいかないことです