Jquery separate複数選択オプション変更時の価格を更新

Question

私はオリジナルの価格の個別の商品がほとんどなく、選択されたドロップダウンと関連する価格もあります。元の価格は選択したオプションに基づいて変更されます。

そこで、ミディアム= 3.50等

<p><span data-name="product_name">Addon Product</span></p> 
<p data-name="product_desc">Addon product descriptions</p> 
<label>Size: </label> 
<select class="product-variants readers form-control input-sm" id="readers" name="product_size"> 
<option data-price="0" value="Small">Small</option> 
<option data-price="40" value="Medium">Medium</option> 
<option data-price="60" value="Large">Large</option> 
</select> 
<span class="price pull-left" itemprop="price" id="price">&pound;5.99</span> 
<hr/> 

<p><span data-name="product_name">2nd Product</span></p> 
<p data-name="product_desc">2nd Addon product description</p> 
<label>Size: </label> 
<select class="product-variants readers form-control input-sm" id="readers" name="product_size"> 
<option data-price="0" value="Small">Small</option> 
<option data-price="20" value="Medium">Medium</option> 
<option data-price="30" value="Large">Large</option> 
</select> 
<span class="price pull-left" itemprop="price" id="price">&pound;3.99</span> 
<hr/> 

製品1 = 3.99、および小（セレクトのオプション）オプションのアドオン= 1.50はまたように商品3、4とがあります。

入力フィールド名、価格、ID、クラスは、データベースから動的に移入されているため、異なるアイテムに対して同じです。

1つの製品が存在する場合、複数の製品とそのオプションでうまくいけば、最初のIDの価格だけが変更されます。たとえば、商品2から選択を変更すると、商品1の価格が変更されます。どうすればそれを自分の製品に固執させ、その製品の価格だけを変えることができますか？

は、ここに私のコードだとjsfiddle

var basePrice = +($('#price').html()).replace(/[^0-9\.]+/g,""); 
    $(".readers").change(function() { 
     newPrice = basePrice; 
     $(".readers option:selected").each(function() { 
     newPrice += +$(this).attr('data-price') 
     }); 
     $("#price").html("£" + newPrice.toFixed(2)); 
     $("#new-price").val(newPrice.toFixed(2)); 
    });