<button id="btn">Calibrate</button>
<div id="block" class="tables">
  <table></table>
</div>

#block {
  max-height: 300px;
  overflow: auto;
  border: 3px solid;
}

function calibration() {
  let max_tickets = 1;
  let protect = 0; // Защита от бесконечного выполнения
  let newElems;

  let i = setInterval(function () {
    let block = document.getElementById("block"); // целевой блок

    if (block.scrollHeight > block.clientHeight || ++protect > 1000) {
      clearInterval(i);
      // Удалим последний добавленный, чтобы не было скролла
      newElems.remove();
      console.log(max_tickets-2);
      return;
    }

    newElems = $("<tr>").append(`<td>${max_tickets}</td>`).append("<td>0</td>");
    $(".tables table:first-child").append(newElems);
    
    max_tickets++;
  }, 0);

}

btn.addEventListener("click", (e) => {
  calibration();
});