Как правильно сделать калькулятор?

function loan() {
    var x1 = document.wpcalc.x1.value;   // Высота
    var x2 = document.wpcalc.x2.value;   // Длина
    var x3 = document.wpcalc.x3.value;   // Ширина
    var p1 = x2 / 1000 * x3 / 1000;
    var p2 = p1 * x1 / 1000;
    document.getElementById("res").innerHTML = ' \
    <table> \
    <tr><td>Площадь плиты:</td><td><b>' + p1 + ' м.<sup>2</sup></b></td></tr>\
    <tr><td>Объем бетона:</td><td><b>' + p2 + '  м.<sup>3</sup></b></td></tr></table>'; 
}



document.querySelectorAll('.visota_inner .visota_minus').forEach(function (element) {
    element.addEventListener('click', function(event) {
        event.preventDefault();
        let input = this.parentElement.querySelector('.visota');
        let count = parseInt(input.value) - 50;
        count = count < 1 ? 1 : count;
        input.value = count;
    });
});
document.querySelectorAll('.visota_inner .visota_plus').forEach(function (element) {
    element.addEventListener('click', function(event) {
        event.preventDefault();
        let input = this.parentElement.querySelector('.visota');
        let count = parseInt(input.value) + 50;
        count = count > parseInt(input.dataset.maxCount) ? parseInt(input.dataset.maxCount) : count;
        input.value = parseInt(count);
    });
});
document.querySelectorAll('.visota_inner .visota').forEach(function (element) {
    element.addEventListener("change", function(event) {
        event.preventDefault();
        if (this.value.match(/[^0-9]/g)) {
            this.value = this.value.replace(/[^0-9]/g, '');
        }
        if (this.value == "") {
            this.value = 1;
        }
        if (this.value > parseInt(this.dataset.maxCount)) {
            this.value = parseInt(this.dataset.maxCount);
        }
    });
});
///////////////////////////////////
document.querySelectorAll('.dlina_inner .dlina_minus').forEach(function (element) {
    element.addEventListener('click', function(event) {
        event.preventDefault();
        let input = this.parentElement.querySelector('.dlina');
        let count = parseInt(input.value) - 500;
        count = count < 1 ? 1 : count;
        input.value = count;
    });
});
document.querySelectorAll('.dlina_inner .dlina_plus').forEach(function (element) {
    element.addEventListener('click', function(event) {
        event.preventDefault();
        let input = this.parentElement.querySelector('.dlina');
        let count = parseInt(input.value) + 500;
        count = count > parseInt(input.dataset.maxCount) ? parseInt(input.dataset.maxCount) : count;
        input.value = parseInt(count);
    });
});
document.querySelectorAll('.dlina_inner .dlina').forEach(function (element) {
    element.addEventListener("change", function(event) {
        event.preventDefault();
        if (this.value.match(/[^0-9]/g)) {
            this.value = this.value.replace(/[^0-9]/g, '');
        }
        if (this.value == "") {
            this.value = 1;
        }
        if (this.value > parseInt(this.dataset.maxCount)) {
            this.value = parseInt(this.dataset.maxCount);
        }
    });
});
//////////////////////////////////
document.querySelectorAll('.shirina_inner .shirina_minus').forEach(function (element) {
    element.addEventListener('click', function(event) {
        event.preventDefault();
        let input = this.parentElement.querySelector('.shirina');
        let count = parseInt(input.value) - 500;
        count = count < 1 ? 1 : count;
        input.value = count;
    });
});
document.querySelectorAll('.shirina_inner .shirina_plus').forEach(function (element) {
    element.addEventListener('click', function(event) {
        event.preventDefault();
        let input = this.parentElement.querySelector('.shirina');
        let count = parseInt(input.value) + 500;
        count = count > parseInt(input.dataset.maxCount) ? parseInt(input.dataset.maxCount) : count;
        input.value = parseInt(count);
    });
});
document.querySelectorAll('.shirina_inner .shirina').forEach(function (element) {
    element.addEventListener("change", function(event) {
        event.preventDefault();
        if (this.value.match(/[^0-9]/g)) {
            this.value = this.value.replace(/[^0-9]/g, '');
        }
        if (this.value == "") {
            this.value = 1;
        }
        if (this.value > parseInt(this.dataset.maxCount)) {
            this.value = parseInt(this.dataset.maxCount);
        }
    });
});

<form name="wpcalc" class="calc">
    <table>
        <tr>
            <td>Высота, мм.</td>
            <td class="visota_inner">
                <input class="visota" type=text name=x1 value=300>
                <button class="visota_plus">+</button>
                <button class="visota_minus">-</button>
            </td>
        </tr>
        <tr>
            <td>Длина, мм.</td>
            <td class="dlina_inner">
                <input class="dlina" type=text name=x2 value=10000>
                <button class="dlina_plus">+</button>
                <button class="dlina_minus">-</button>
            </td>
        </tr>
        <tr>
            <td>Ширина, мм.</td>
            <td class="shirina_inner">
                <input class="shirina" type=text name=x3 value=10000>
                <button class="shirina_plus">+</button>
                <button class="shirina_minus">-</button>
            </td>
        </tr>
    </table>
        <div class="col-xl-12">
            <table>
                <tr>
                    <td align="center" colspan="2">
                        <input type="button" value="Рассчитать">
                    </td>
                </tr>
            </table>
        </div>
  <span id=res></span> </form>