JSFiddle - React, Tailwind, and code Playground

by Simon Hartley

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="action_1">
    <input type="text" name="color_select">
      <select id="actionSel_1">
         <option value="0.00">Choose Color 1</option>
         <option value="10.95">Pink</option>
      </select>
</div>
<div id="action_2">
    <input type="text" name="color_select">
      <select id="actionSel_2">
          <option value="0.00">Choose Color 2</option>
          <option value="20.95">Orange</option>
      </select>
</div>
<div id="action_3">
    <input type="text" name="color_select">
      <select id="actionSel_3">
          <option value="0.00">Choose Color 2</option>
          <option value="30.95">Red</option>
      </select>
</div>
<div> <span id="span"></span>
Estimated Cost: <span id="sum"> </span>

JavaScript

$('select').change(function(){
    var sum = 0;
    $('select :selected').each(function() {
        sum += parseFloat($(this).val());
    });
     $("#sum").html(sum);
});