JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.14.2/math.min.js"></script>
<h1 align="center">Insertion of Missing Data</h1>

<!-- Begin Instructions -->
<h2>Instructions:</h2>
<ol style="list-style: none;">
  <li><b>Step 1: </b> Open the document <a href="P4TW2QAS9" target='_blank'>HERE</a></li>
  <li><b>Step 2: </b> Find the first TVD Value and enter it here
    <input type="text" name="firstTVD" id="TVD1"> often this value is 0, please refer to the <a href="https://storage.googleapis.com/directionalsurvey/tvd.PNG" target='_blank'>Example</a></li>
  <li><b>Step 3: </b>Transcribe the three columns Measured Depth, Inclination, and Azimuth. I have provided the majority of extracted values below you will just need to edit and add data where necessary. common header names are listed below:</li>
  <li>
    <ul>
      <li><b>Measured Depth</b></li>
      <ul>
        <li>MD, Depth, Measured Depth, M.D.</li>
      </ul>
      <li><b>Inclination</b></li>
      <ul>
        <li>Incl, IncAng, Inclination Angle, Inclination</li>
      </ul>
      <li><b>Azimuth</b></li>
      <ul>
        <li>Azi, Azimuth Angle, DirDeg, Directional Angle</li>
      </ul>
      <li><b>TVD</b></li>
      <ul>
        <li>T.V.D, Vertical Depth, True Vertical Depth</li>
      </ul>
    </ul>
  </li>
  <li><b>Step 4: </b>Hit "Check Work" below the sheet and if you have entered every value correctly submit will become clickable.</li>
</ol>
<p>
  <i>Right click to add or delete rows, you can also paste your work in from another sheet if you prefer</i>
</p>



<!-- End of Instructions -->

<div class="handsontable" id="Table"></div>
<input type="button" name="submit" value="Check Work"...

JavaScript

var csvLink = 'https://storage.googleapis.com/directionalsurvey/testDScsv.csv';
var data = [];
//var trueTVD = X6J374YZ;
var trueTVD = 800;
d3.csv(csvLink, function(dat) {
  for (i = 0; i < dat.length; i++) {
    var inner = [];
    inner.push(dat[i]['Measured Depth']);
    inner.push(dat[i]['Inclination']);
    inner.push(dat[i]['Azimuth']);
    data.push(inner);
  }

  var container1 = document.getElementById('Table'),
    hot1;

  var hot1 = new Handsontable(container1, {
    data: data,
    colHeaders: ['Measured Depth', "Inclination", "Azimuth"],
    rowHeaders: true,
    minSpareRows: 0,
    contextMenu: ['row_above', 'row_below', 'remove_row']
  });

  function countRows() {
    var ht = hot1
    var rowcount = ht.countRows() - ht.countEmptyRows();
    return rowcount;
  }


  $("#get_data").click(submitForm);

  /////////////////////////////////////////Begin Functions for Minimum Curvature Algorithm////////////////////////////
  function Beta(I1, I2, Az1, Az2) {
    var dI = Deg2Rad(I2) - Deg2Rad(I1);
    var dA = Deg2Rad(Az2) - Deg2Rad(Az1);
    var X = math.sin(Deg2Rad(I1)) * math.sin(Deg2Rad(I2));
    var Y = math.cos(dI);
    var Z = math.cos(dA);
    var beta = math.acos(Y - (X * (1 - Z)));
    return beta;
  }

  function RF(beta) {
    var b = beta;
    var rf = (2 / b) * math.tan(b / 2);
    return rf;
  }

  function TVD(dmd, I1, I2, RF) {
    var A = math.cos(Deg2Rad(I1)) + math.cos(Deg2Rad(I2));
    var tvd = (dmd / 2) * A * RF;
    return tvd;
  }

  function Deg2Rad(deg) {
    return deg * math.pi / 180;
  }

  function Rad2Deg(rad) {
    return rad * 180 / math.pi
  }

  // function to calculate the TVD
  function TVDcalc(MD, INC, AZI, Depth) {

    var md = MD;
    var inc = INC;
    var azi = AZI;
    var i;
    for (i = 0; i < md.length - 1; i++) {
      var beta = Beta(inc[i], inc[i + 1], azi[i], azi[i + 1]);
      if (inc[i] == inc[i+1] && azi[i] == azi[i+1]){
      		var rf = 1;
      } else{
      		var rf = RF(beta);
      }
      if...