having problem with plus/minus buttons in input type number

const 
  myTable_tBody = document.querySelector('#my-table tbody')
, templateRow   = document.querySelector('#template-row')
, myTable_Total = document.querySelector('#my-table tfoot input[name="anstotal"]')
  ;
AddNewRow(); // first attempt

document.querySelector('#btn-add-row').addEventListener('click', AddNewRow);

myTable_tBody.addEventListener('input', setTotals);

myTable_tBody.addEventListener('click', e =>
  {
  if (!e.target.matches('button[name="delete-row"]')) return;
  e.target.closest('tr').remove();
  setTotals();
  });

function setTotals()
  {
  let Total = 0;
  [...myTable_tBody.rows].forEach( r => 
    {
    let inTotal = r.querySelector('input[name="qty"]').valueAsNumber
                * +r.querySelector('select[name="sel"]').value;

    r.querySelector('input[name="total"]').value = inTotal;
    Total += inTotal;
    });
  myTable_Total.value = Total;
  }
  
function AddNewRow()
  {
  if (myTable_tBody.rows.length < 4)
    myTable_tBody.append( document.importNode(templateRow.content, true) );
  else
    alert("Maximum Passenger per ticket is 4.");
  }

table {
  font-family     : Arial, Helvetica, sans-serif;
  font-size       : 14px;
  background      : darkblue;
  border-collapse : separate;
  border-spacing  : 1px;
  }
th {
  background-color : aquamarine;
  padding          : .8em .4em;
  }
td {
  background-color : whitesmoke;
  padding          : .8em .4em;
  text-align       : right;
  }

/* hide the delete button in case of only one row. */ 
table#my-table tbody tr:only-child button[name="delete-row"] {
  visibility : hidden;
  }
input[name="qty"] {
  width: 90px;
}

.form__number {
    display: flex;
    position: relative;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  min-width: var(--size-min-width);
    width: 100%;
  border: 1px solid var(--color-input-number-border);
  border-radius: 3px;
}
.form__number_input-number {
    display: flex;
    width: var(--size-min-width); 
  width: 30%;
  height: var(--size);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
  border: 0;
  
}
.form__number_input-number::-webkit-outer-spin-button,
.form__number_input-number::-webkit-inner-spin-button {
    display: none;
}
.form__number_button {
  border: 0;
  background-color: #fff0;
  width: var(--size);
  color: var(--color-input-number-button-fg);
  cursor: pointer;
  border: 1px solid black;
}
.form__number_button:hover {
  color: var(--color-link);
}
.form__number_button:active
,.form__number_button:focus {
  outline: none !important;
}
.form__number_button::-moz-focus-inner {
  border: 0;
}

<button id="btn-add-row">Add new row</button>
<table id="my-table">
  <thead> <tr><th>Quantity</th><th>Price</th><th>Total</th><th></th></tr> </thead>
  <tbody> </tbody>
  <tfoot> <tr><td colspan="3"> TOTAL = <input type="text" name="anstotal" value="0" readonly></td><td></td></tr> </tfoot>
</table>

<template id="template-row">
  <tr> 
    <td> 
    <button 
      class="form__number_button form__number_button-minus" 
      type="button" 
      onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();"
    >
    -
    </button>
       <input type="number" name="qty" value="0" min="0">  
    <button type="button" 
      class="form__number_button form__number_button form__number_button-plus" 
      onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();"
    >
     +
    </button>
    </td>
    <td>
      <select name="sel" >
        <option value="0" disabled selected>Choose a price</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>      
    </td>
    <td> <input type="text" name="total" value="0" readonly> </td>
    <td> <button name="delete-row">Delete</button> </td>
  </tr>
</template>