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>
<table class="table" style="width: 500px;">
  <tbody>
    <tr>
      <td colspan="1" rowspan="2">hdd</td>
      <td colspan="2" rowspan="1">
        <div class="btn-group button-selector-group" data-toggle="buttons-radio">
          <span class="btn button-selector"
            data-selector-name="montly_hdd, once_hdd"
            data-selector-clear="once_hdd"
            data-selector-value="20">20$ monthly</span>
          <span class="btn button-selector"
            data-selector-name="once_hdd"
            data-selector-clear="montly_hdd"
            data-selector-value="150">150$ once</span>
          <span class="btn button-selector active"
            data-selector-name="montly_hdd once_hdd"
            data-selector-value="">x</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <input disabled="disabled" name="montly_hdd" />
        $ monthly
      </td>
      <td>
        <input disabled="disabled" name="once_hdd" />
        $ once
      </td>
    </tr>
    <tr>
      <td colspan="1" rowspan="2">ssd</td>
      <td colspan="2" rowspan="1">
        <div class="btn-group button-selector-group" data-toggle="buttons-radio">
          <span class="btn button-selector" data-selector-name="montly_ssd" data-selector-value="30" name="upgrade">30$ monthly</span>
          <span class="btn button-selector" data-selector-name="once_ssd" data-selector-value="330" name="upgrade">330$ once</span>
          <span class="btn button-selector active" data-selector-value="x" name="upgrade">x</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <input disabled="disabled" name="montly_ssd" />
        $ monthly
      </td>
      <td>
        <input disabled="disabled" name="once_ssd" />
        $ once
      </td>
    </tr>
    <tr>
   ...

CSS

input {
    width: 40px;
}

JavaScript

$(function () {

    $('.button-selector-group').each(function () {

        var selector_name = $(this).attr('data-selector-name');

        var relative_buttons = $(this).children(".button-selector");

        var active_button = $(relative_buttons.filter('.active')[0] || relative_buttons.first()[0]);
        active_button.click();

        $(this).children(".button-selector").click(function (e) {
            var selector_data = $(this).attr('data-selector-value');
            var selector_name_personal = $(this).attr('data-selector-name');

            $('input[name="' + selector_name + '"], input[name="' + selector_name_personal + '"]').val(selector_data);

        });

    });

});