JSFiddle - React, Tailwind, and code Playground

HTML

<label>Moon Size:
  <input type="number" id="moon_size" value="8426" onChange="calc()">
</label>
<label>Waves:
  <input type="number" id="waves" value="6" onChange="calc()">
</label>
<table border="1">
  <tr>
    <th>RIP Destruction Chance</th>
    <td id="rip_destruct_pct">&nbsp;</td>
  </tr>
  <tr>
    <th>RIP's required for 100% Destruction Chance</th>
    <td id="rip_max">&nbsp;</td>
  </tr>
</table>
<div id="waves_table">
  <table />
</div>
<script>
  function calc() {
    var size = parseInt(document.getElementById('moon_size').value);
    var waves = parseInt(document.getElementById('waves').value);
    var max_needed = Math.ceil(Math.pow(100 / (100 - Math.sqrt(size)), 2));
    var seq = [];
    for (var i = 1; i < waves; i++) {
      seq.push(1);
    }
    seq.push(max_needed);
    var lost = getTotalRipsDestroyed(size, seq);
    for (var i = waves - 2; i >= 0; i--) {
      while (true) {
        seq[i]++;
        var nlost = getTotalRipsDestroyed(size, seq);
        if (nlost > lost) {
          seq[i]--;
          break;
        }
        lost = nlost;
      }
    }

    var destruct_chance = Math.sqrt(size) / 200;

    document.getElementById('rip_destruct_pct').innerHTML = (Math.round(destruct_chance * 10000) / 100) + "%";
    document.getElementById('rip_max').innerHTML = max_needed;

    var t = document.createElement('table');
    t.setAttribute('border', '1');

    var row = document.createElement('tr');

    var th = document.createElement('th');
    th.appendChild(document.createTextNode("Wave"));
    row.appendChild(th);

    th = document.createElement('th');
    th.appendChild(document.createTextNode("RIP Count"));
    row.appendChild(th);

    th = document.createElement('th');
    th.appendChild(document.createTextNode("Cumulative Count"));
    row.appendChild(th);

    th = document.createElement('th');
    th.appendChild(document.createTextNode("Pop %"));
    row.appendChild(th);

    th = document.createElement('th');
   ...