JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.min.js"></script>
<table class="table" style="width: 500px;">
  <tbody>
    <tr>
      <td>hdd</td>
      <td colspan="2" rowspan="1">
        <div class="btn-group button-selector-group" data-toggle="buttons-radio">
          <span class="btn button-selector monthly"
            data-input-name="montly_hdd"
            data-selector-value="20">20$ monthly</span>
          <span class="btn button-selector once"
            data-input-name="once_hdd"
            data-input-value="150">150$ once</span>
          <span class="btn button-selector active">x</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>ssd</td>
      <td colspan="2" rowspan="1">
        <div class="btn-group button-selector-group" data-toggle="buttons-radio">
          <span class="btn button-selector monthly"
            data-input-name="montly_ssd"
            data-selector-value="33">33$ monthly</span>
          <span class="btn button-selector once"
            data-input-name="once_ssd"
            data-input-value="350">350$ once</span>
          <span class="btn button-selector active">x</span>
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="2">price</td>
      <td>
        <input disabled="disabled" name="montly_total" />
        $ monthly
      </td>
      <td>
        <input disabled="disabled" name="once_total" />
        $ once
      </td>
    </tr>
  </tbody>
</table>

CSS

input {
    width: 40px;
}

JavaScript

var monthly = $("input[name='montly_total']");
var once = $("input[name='once_total']");

$(".button-selector").click(function () {
    // break out of click handler chain
    setTimeout(function() {
        // by the time this runs, the active state will have been updated
        $(".button-selector.monthly.active").sum("click", monthly);
        $(".button-selector.once.active").sum("click", once)
    }, 0);
});