JSFiddle - React, Tailwind, and code Playground

by itamer

HTML

<div id="body">
  <div id="content">
    <div id="section">

      <table>
        <tr>
          <td>
            Month of joining</td>
          <td>
            <select id="month_field">
              <option>January</option>
              <option>February</option>
              <option>March</option>
              <option>April</option>
              <option>May</option>
              <option>June</option>
              <option>July</option>
              <option>August</option>
              <option>September</option>
              <option>October</option>
              <option>November</option>
              <option>December</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>Category?
          <td>
            <input type="radio" name="age" value="0" id="senior1" checked>Senior (over 24)<br />
            <input type="radio" name="age" value="1" id="senior2">Senior (18 - 24)<br />
            <input type="radio" name="age" value="2" id="junior">Junior (U18)<br />
            <input type="radio" name="age" value="3" id="disabilities">Archer with disabilities
          </td>
        </tr>
        <tr>
          <td><input type="checkbox" class="extras" id="agbnewcheck">Archery GB Fees New Members</td>
          <td id='agbnew'></td>

        </tr>
        <tr>
          <td><input type="checkbox" class="extras" id="agbfeescheck" disabled=disabled checked=checked value=1>Archery GB Fees Reaffiliation</td>
          <td id='agbfees'></td>

        </tr>
        <tr>
          <td><input type="checkbox" class="extras" id="yaafeescheck">YAA Fees</td>
          <td id='yaafees'></td>

        </tr>
        <tr>
          <td><input type="checkbox" class="extras" id="ncasfeescheck">NCAS Fees</td>
          <td id='ncasfees'></td>

        </tr>

      </table>

      <h3>&nbsp;</h3>
      <h2>Total On first day: £<span id="session">0</span>.</h2>

    </div>
  </div>
</div>

CSS

body,
td {
  font-family: Arial, Helvetica, sans-serif;
  color: dimgray;
}
tr td:not(:first-child) {
    text-align: right;
}
td{ 
  vertical-align: top;
padding: .1em;
}

JavaScript

var calculator = {
  fees: {
    agbfees: [48, 14, 14, 14],
    agbnew: [47, 12, 12, 12],
    ncas: [2, 2, 0.2, 0.2],
    yaa: [4, 4, 0.4, 0.4],
  },
  remaining_months: 12,
  age: 0,

  init: function() {
    
    document.getElementById("month_field").addEventListener("click", this.calculateFee);

    document.getElementById("senior1").addEventListener("click", this.changeFee);
    document.getElementById("senior2").addEventListener("click", this.changeFee);
    document.getElementById("junior").addEventListener("click", this.changeFee);
    document.getElementById("disabilities").addEventListener("click", this.changeFee);

    document.getElementById("senior1").addEventListener("click", this.calculateFee);
    document.getElementById("senior2").addEventListener("click", this.calculateFee);
    document.getElementById("junior").addEventListener("click", this.calculateFee);
    document.getElementById("disabilities").addEventListener("click", this.calculateFee);
    document.getElementById("agbnewcheck").addEventListener("click", this.calculateFee);
    document.getElementById("yaafeescheck").addEventListener("click", this.calculateFee);
    document.getElementById("ncasfeescheck").addEventListener("click", this.calculateFee);
    
    this.changeFee();
    this.calculateFE
  },

  setRemainingMonths: function() {
    var selected_month = document.getElementById("month_field").selectedIndex;

    this.remaining_months = 12 - selected_month;
  },

  setAge: function() {
    
    let radio = document.querySelectorAll('input[name="age"]');

    for (const rb of radio) {
      if (rb.checked) {
        calculator.age = rb.value;
        break;
      }
    }
  },

  changeFee: function() {

    calculator.setRemainingMonths();
    calculator.setAge();

    document.getElementById("agbfees").innerHTML = '£ ' + calculator.fees.agbfees[calculator.age].toFixed(2);
    document.getElementById("agbnew").innerHTML = '£ ' + calculator.fees.agbnew[calculator.age].toFixed(2);
...