Jquery單獨選擇多個選項更新價格發生變化

Question

我有幾個單獨的產品，原價並且每個產品都帶有一個選擇下拉列表和相關價格，原始價格根據選擇的選項進行更改，這是通過JQuery完成的。

所以產品1 = 3.99，以及可選的附加元件（從選項中選擇）小= 1.50，中等= 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/> 

也將有產品3,4等。

輸入字段名稱，價格，ID，類正在從數據庫動態填充，因此它們對於不同的項目是相同的。

如果有一種產品存在，那麼它很好，但是對於多種產品及其選項，第一個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)); 
    });