I have the following form on my page JSBin
Each option on the page has a text associated with it(like option1: R50, where R is the currency) with the total price of the product is on top of the page (R500). I want that price to be updated based on the option text value. Like selecting weight- 30kg should add R50 to the total value at the top and update it and deselecting it should update again. I need to use Javascript take the price from the option text-split the currency from the numerical value-add id to the base price; but I can't figure out how to do it and for all the three option types.
html
<div class="col-sm-4"> <ul class="list-unstyled"> <li id="thisIsOriginal"> <h2>R500</h2> </li> </ul> <div id="product"> <hr> <h3>Available Options</h3> <div class="form-group required"> <label class="control-label">Radio</label> <div id="input-option218"> <div class="radio"> <label> <input type="radio" name="option[218]" value="5"> Small (+R12) </label> </div> <div class="radio"> <label> <input type="radio" name="option[218]" value="6"> Medium (+R45) </label> </div> <div class="radio"> <label> <input type="radio" name="option[218]" value="7"> Large (+R50) </label> </div> </div> </div> <div class="form-group required"> <label class="control-label">Checkbox</label> <div id="input-option223"> <div class="checkbox"> <label> <input type="checkbox" name="option[223][]" value="8"> Checkbox 1 (+R50) </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="option[223][]" value="9"> Checkbox 2 (+R44) </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="option[223][]" value="10"> Checkbox 3 (+R22) </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="option[223][]" value="11"> Checkbox 4 (+R65) </label> </div> </div> </div> <div class="form-group required"> <label class="control-label" for="input-option227">weight</label> <select name="option[227]" id="input-option227" class="form-control"> <option value=""> --- Please Select --- </option> <option value="19">30kg (+R50)</option> <option value="17">10kg</option> <option value="18">20kg (+R24)</option> </select> </div> 
