[Solved] How to create a Sports Bet Calculator using javascript

const bt_Nwline = document.getElementById('New-Line')
  ,   xForm     = document.getElementById('form-X')
  ,   wTable    = xForm.querySelector('table')
  ,   baseLine  = wTable.querySelector('thead tr:nth-of-type(3)')
  ,   tBody     = wTable.querySelector('tbody')
  ,   tPayout   = wTable.querySelector('tfoot td:nth-of-type(2)')
  ;
xForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ;
xForm.onreset =_=>{ tPayout.textContent="0.00" }
  ;
function betCalculator()
  {
  let bet  = xForm.betAmount.valueAsNumber || 0
    , odds = [...tBody.querySelectorAll('input')]
              .filter(ml=>!isNaN(ml.valueAsNumber) )
              .reduce((odd,ml)=> odd *= ml.valueAsNumber >= 0
                                      ? (ml.valueAsNumber /100) +1
                                      : (100 / Math.abs(ml.valueAsNumber)) +1
                    ,1)
  tPayout.textContent = ((odds *bet).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g,',')
  }
betCalculator()
  ;
bt_Nwline.onclick=_=>
  {
  tBody.appendChild( baseLine.cloneNode(true)) 
  }
tBody.onclick=e=>
  {
  if (!e.target.matches('button')) return
  wTable.deleteRow(e.target.closest('tr').rowIndex)
  betCalculator()
  }
xForm.oninput = betCalculator
  ;

table   { border-collapse: collapse; }
caption { background-color: #1a4641; color: whitesmoke; font-weight: bold;  padding: .6em;}
td:nth-of-type(1) { min-width:8em; }
td      { border: 1px solid grey; padding: .4em .8em; }
thead   { background-color: #7adfd3; color: #1d1313;  font-weight: bold; }

thead tr:nth-of-type(1) td:nth-of-type(1) { text-align: right; }
thead tr:nth-of-type(2) td:nth-of-type(1) { text-align: center; }

thead tr:nth-of-type(3) { display: none; counter-reset: line; }
tbody tr { counter-increment: line; }
tbody td:nth-of-type(1) {  color: darkslategrey; }
tbody td:nth-of-type(1)::before { content: counter(line) '\00a0-\00a0\00a0'; }

tfoot { font-weight: bold; }
tfoot td:nth-of-type(1) { text-align: right; }
tfoot td:nth-of-type(2)::before { content: '$ ' }

input { font-size: 1.2em; text-align: right; direction: rtl; width:8em;}

button  { 
  width: 2em;
  height: 1.4em;
  border-radius: 1em / .6em;
  color: whitesmoke;
  font-size: .9em;
  font-weight: bolder;
  line-height: .8em;
  padding: 0;
}
thead tr:nth-of-type(1) button { background-color: #063329; }
thead tr:nth-of-type(2) button { background-color: crimson; }
tbody button  { background-color: #071b3f;}

<form action="" id="form-X">
  <table>
    <caption title="Useful for both Negative ‘−’ and / or Positive ‘+’ Money Lines including Single Straight Bets!">
      True Odds Parlay Bet Calculator
    </caption>
    <thead>
      <tr>
        <td>Bet Amount : </td>
        <td><input type="number" step="10" value="0" name="betAmount" min="0"></td>
        <td><button type="reset">&empty;</button></td>   
      </tr>
      <tr><td colspan="2">Teams Money Lines</td>  <td><button id="New-Line">+</button></td></tr>
      <tr>
        <td contenteditable spellcheck="false">...</td>
        <td><input type="number" step="10" value="0"></td>
        <td><button>&#8722;</button></td>
      </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
      <tr>
        <td> Payout : </td>
        <td colspan="2"> </td>
      </tr>
    </tfoot>
  </table>
</form>

const myForm     = document.getElementById('my-form')
  ,   moneyLines = [...myForm.querySelectorAll('.moneyLine')]
  ;
myForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ; 
myForm.oninput = betCalculator
  ;
function betCalculator()
  {
  let bet  = myForm.betAmount.valueAsNumber || 0
    , odds = moneyLines
                .filter(ml=>!isNaN(ml.valueAsNumber) )
                .reduce((odd,ml)=> odd *= ml.valueAsNumber >= 0
                                        ? (ml.valueAsNumber /100) +1
                                        : (100 / Math.abs(ml.valueAsNumber)) +1
                      ,1)

  
  myForm.result.value = (odds *bet).toFixed(2)
  }
betCalculator()

form#my-form { position: relative; }
legend {font-size: .9em; }
legend:after { content: '\00a0' }
fieldset { display:block; width: 16em; position: absolute; }
fieldset:nth-child(1){ top: 1em; left: 1em; }
fieldset:nth-child(2){ top: 1em; left:20em; }
fieldset:nth-child(3){ top:19em; left: 1em; }
label   { display: block; float: left; clear: both; margin: .2em 1em .4em 0;}
label b { display: inline-block; width:2em }
label b::after { content:' : '}
label input { font-size: 1.2em; text-align: right; direction: rtl; width:8em;}
output { font-weight: bold; width: 14em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;}
output::before {  content: '$ '; }

<h2>True Odds Parlay Bet Calculator</h2>

<p><small>
  Useful for both <b>Negative "&#8722;"</b> and/or <b>Positive "+"</b> Money Lines including Single Straight Bets!
</small></p>

<form action="" id="my-form">
  <fieldset>
    <legend>Bet Amount :</legend>
    <label><input type="number" name="betAmount" step=any min=0></label>
  </fieldset>

  <fieldset>
    <legend>Team Respective Money Lines :</legend>
    <label><b>1</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>2</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>3</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>4</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>5</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>6</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>7</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>8</b><input type="number" class="moneyLine" step=any ></label>
    <label><b>9</b><input type="number" class="moneyLine" step=any ></label>
  </fieldset>

  <fieldset>
    <legend>Payout :</legend>
    <output name="result" value="0"></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>