JSFiddle - React, Tailwind, and code Playground

HTML

<form id="quoteform" action="confirm_plan_options.php" method="post" name="quoteform">
  <div id="deduct_term_holder">
    <h3 class="fs-subtitle">Deductibles</h3>
    <input name="disappearing" value="Disappearing" class="deductible" id="deductible0" type="button">
    <input style="display: none;" name="zero" value="$0" class="deductible" id="deductible1" type="button">
    <input name="fifty" value="$50" class="deductible" id="deductible2" type="button">
    <input name="onehundred" value="$100" class="deductible uiButton" id="deductible3" type="button">
    <input name="two-hundred" value="$200" class="deductible" id="deductible4" type="button">
    <br>
    <h3 class="fs-subtitle">Term Years</h3>
    <input name="1-year" value="1 years" class="term-years" id="1_year_term" type="button">
    <input name="2-year" value="2 years" class="term-years uiButton" id="2_year_term" type="button">
    <input name="3-year" value="3 years" class="term-years" id="3_year_term" type="button">
    <input name="4-year" value="4 years" class="term-years" id="4_year_term" type="button">
    <input name="5-year" value="5 years" class="term-years" id="5_year_term" type="button">
    <input style="display: none;" name="6-year" value="6 years" class="term-years" id="6_year_term" type="button">
    <input style="display: none;" name="7-year" value="7 years" class="term-years" id="7_year_term" type="button">
    <input style="display: none;" name="8-year" value="8 years" class="term-years" id="8_year_term" type="button">
  </div>
  <div id="plansdiv" style="width:100%">
    <table id="plans">
      <caption>Ford Extended Service Care Plans
        <br>Click on price to select.</caption>
      <tbody>
        <tr>
          <td>Term Miles</td>
          <td>End Year</td>
          <td>PremiumCare</td>
          <td>ExtraCare</td>
          <td>BaseCare</td>
          <td>PowertrainCare</td>
        </tr>
        <tr>
          <td class="term_miles">12,000</td>
          <td>2018</td>
...

CSS

button.term-years,
button.deductible {
  border: 1px solid black;
  border-radius: 2px;
  background-color: #27AE60;
  padding: 5px 10px;
}

input.term-years,
input.deductible {
  border: 1px solid black;
  border-radius: 2px;
  background-color: #27AE60;
  padding: 5px 5px;
}

input.uiButton {
  color: red!important;
  background-color: #000;
}

input.deductible:hover,
input.term-years:hover,
input.plan-price:hover {
  color: red !important;
  box-shadow: 0 0 0 2px white, 0 0 0 3px red;
  background-color: #000;
}

.plan-price {
  background-color: #27AE60;
  padding: 2px;
}

#plans caption {
  text-align: center;
}

#plans {
  margin: 0 auto;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
  font-size: .8em;
  color: #808080;
  width: 90%;
}

#plans table,
td {
  border: 1px solid #ccc;
}

#plans td {
  padding: 5px;
}

#plans tbody tr:nth-child(even) {
  background: WhiteSmoke;
}

JavaScript

$('.deductible').click(function(e) {
  var termstr = '';
  var deductstr = '';
  var factory_warranty = $('input[name=factory_warranty]:checked').val();
  var snowplow = $('input[name=snowplow]:checked').val();
  var usage = $('input[name=usage]:checked').val();
  var milestr = $('#current_milage').val();
  var turbo = $('input[name=turbo]:checked').val();
  var purchase_date = $('input[name=purchase_date]:checked').val();
  $('.deductible').each(function() {
    if ($(":focus") && !$(this).hasClass('uiButton') && !$('.deductible').hasClass('uiButton')) {
      $(this).toggleClass('uiButton');
    } else if ($(this).hasClass('uiButton') && $(":focus")) {
      e.preventDefault();
    } else if (!$(this).hasClass('uiButton') && !$('.term-years').is(':focus') && !$('.term-years').hasClass('uiButton') && $(this).is(':focus')) {
      $(this).toggleClass('uiButton');
    } else if (!$(this).hasClass('uiButton') && !$('.term-years').is(':focus') && $('.term-years').hasClass('uiButton') && $(this).is(':focus') && $('.deductible').hasClass('uiButton')) {
      $('.deductible').removeClass('uiButton');
      $(this).toggleClass('uiButton');
    }
  });
  $('.term-years').each(function(i) {
    if ($('#' + i + '_year_term').hasClass('uiButton')) {
      termstr = $('#' + i + '_year_term').val();
    }
  });
  $('.deductible').each(function(i) {
    if ($('#deductible' + i).hasClass('uiButton')) {
      deductstr = $('#deductible' + i).val();
      if (deductstr.indexOf('$') > -1) {
        deductstr = deductstr.replace(/\D/g, '');
      }
    }
  });
  //alert('plan code is' + plan_code);
  get_plan_pricing(plan_type, plan_code, termstr, deductstr, milestr, factory_warranty, snowplow, usage, turbo, purchase_date);
});
$('.term-years').click(function() {
  var str = $(this).val();
  var milestr = $('#current_milage').val();
  var deductstr = '';
  var factory_warranty = $('input[name=factory_warranty]:checked').val();
  var snowplow =...