JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html lang="en-GB">

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Two Envelopes Game</title>

  </head>

  <body>

    <table>

      <thead>

        <tr>

          <th>A</th>

          <th>B</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <input type="hidden" id="value" value="0">

          <td style="text-align: center"><a id="envelope-a" href="javascript:" onclick="select(this)">Select</a></td>

          <td style="text-align: center"><a id="envelope-b" href="javascript:" onclick="select(this)">Select</a></td>

        </tr>

      </tbody>

      <tfoot>

        <tr>

          <th style="text-align: left">Games played:</th>

          <th style="text-align: right"><span id="games">0</span></th>

        </tr>

        <tr>

          <th style="text-align: left">Your earnings:</th>

          <input type="hidden" id="switch-value" value="0">

          <th style="text-align: right">&pound;<span id="switch">0</span></th>

        </tr>

        <tr>

          <th style="text-align: left">If never switch:</th>

          <input type="hidden" id="never-switch-value" value="0">

          <th style="text-align: right">&pound;<span id="never-switch">0</span></th>

        </tr>

        <tr>

          <th style="text-align: left">Gain:</th>

          <th style="text-align: right"><span id="gain">0.00</span></th>

        </tr>

        <tr>

          <th style="text-align: left">Max value seen:</th>

          <input type="hidden" id="max-value" value="0">

          <th style="text-align: right"><span id="max">N/A</span></th>

        </tr>

      </tfoot>

    </table>

    <button type="button" id="stick" style="display: none" onclick="stick()">Stick</button>

    <button type="button" id="next" style="display: none" onclick="next()">Next</button>

  </body>

</html>

JavaScript

var selected = false, switched = false, games = 0

  function newGame()
  {

    selected = switched = false

    var envelope_a = document.getElementById('envelope-a')

    var envelope_b = document.getElementById('envelope-b')

    envelope_a.disabled = envelope_b.disabled = false

    envelope_a.innerHTML = envelope_b.innerHTML = 'Select'

    envelope_a.style.fontWeight = envelope_b.style.fontWeight = 'normal'

    var x = (Math.floor(Math.random() * 100) + 1) * 4

    var envelopes = [x, x * 2]

    var i = Math.round(Math.random())

    envelope_a.value = envelopes[i]

    envelope_b.value = envelopes[i ? 0 : 1]
    
  }

  function select(envelope)
  {

    if (envelope.disabled)
    {
      return
    }

    if (!selected)
    {

      document.getElementById('value').value = envelope.value

      envelope.innerHTML = '&pound;' + envelope.value

      envelope.style.fontWeight = 'bold'

      envelope.disabled = true

      if ('envelope-a' === envelope.id)
      {
        document.getElementById('envelope-b').innerHTML = 'Switch'
      }

      else
      {
        document.getElementById('envelope-a').innerHTML = 'Switch'
      }

      selected = true

      var never_switch_value = document.getElementById('never-switch-value')

      never_switch_value.value = parseInt(never_switch_value.value) + envelope.value

      document.getElementById('stick').style.display = 'inline-block'

    }

    else if (!switched)
    {

      document.getElementById('value').value = envelope.value

      envelope.innerHTML = '&pound;' + envelope.value

      envelope.style.fontWeight = 'bold'

      if ('envelope-a' === envelope.id)
      {
        document.getElementById('envelope-b').style.fontWeight = 'normal'
      }

      else
      {
        document.getElementById('envelope-a').style.fontWeight = 'normal'
      }

      switched = true

      document.getElementById('stick').style.display = 'none'

      document.getElementById('next').style.display =...