Need to know how to have calculated results added to cart, using Add to Cart button

I have written a math html to figure out the square footage of boxes of material that a client needs to order.
I have loaded it and here is an example page:

[https://oflooring.com/hardwood/hf-design-canon-brentwood-hills-collection-bh537ocn-millstone-european-white-oak-7-5-inch-wide-hardwood-flooring.html][1]

As you can see on this page, after a client enters the amount they need, then they have to manually enter square foot per box, in this case 23.5 sq. ft. fetched via an attribute

What code do I need to write to have square foot per carton attribute automatically entered into “Enter Square Foot Per Carton” box?

How can I have final results of Total Square footage added to cart by clicking on “ADD TO CART button”

I have made all the changes on addtocart.phtml on design side. and here is a copy of that:

<?php
/**
* Copyright © 2017 Codazon, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

// @codingStandardsIgnoreFile

/** @var $block MagentoCatalogBlockProductView */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()): ?>


<div class="box-tocart large-box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()): ?>
        <div class="field qty">
            <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
            <div class="control">
                <div class="cart-qty">
                    <div class="qty-ctl">
                        <button title="<?= __('Decrease') ?>" type="button" data-role="change_cart_qty" class="decrease" data-qty="-1" class="decrease"></button>
                    </div>
                    <input type="number" class="qty" name="qty" id="qty" maxlength="12" value="<?= $block->getProductDefaultQty() * 1 ?>" title="<?php echo __('Qty') ?>" class="input-text qty" data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>" />
                    <div class="qty-ctl">
                        <button title="<?= __('Increase') ?>" type="button" data-role="change_cart_qty" data-qty="1" class="increase"></button>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>

<div class="fieldset">

<strong>
<?php $_product = $block->getProduct(); ?>
<?= $_product->getData('sq_ft_per_carton'); ?> 
</strong>

<strong>Sq. FT. per Carton of This Product</strong></br>

</div>

<h1>Carton Calculator</h1>
<form>
  <label for="input">Enter Needed Square Footage:</label>
  <input type="number" id="input" name="input" required><br><br>

  <label for="divider">Enter Square Foot Per Carton:</label>
  <input type="number" id="divider" name="divider" required><br><br>

  <input type="button" value="Calculate" onclick="calculate()"><br><br>
  <label for="first-result">Amount Of Cartons Needed:</label>
  <input type="text" id="first-result" name="first-result" readonly>
      <label for="second-result">Total Square Footage You Need To Order:</label>
  <input type="text" id="second-result" name="second-result" readonly>
</form>
    <strong>Enter Final Square Footage In QTY Above</strong>
    <script>
      function calculate() {
        const input = document.getElementById("input").value;
        const divider = document.getElementById("divider").value;
        const firstResult = Math.ceil(input / divider);
        const secondResult = firstResult * divider;
        document.getElementById("first-result").value = firstResult;
        document.getElementById("second-result").value = secondResult;
      }
    </script>

        <div class="actions">
          <?php
              $objectManager = MagentoFrameworkAppObjectManager::getInstance();
              $storeManager = $objectManager->get('MagentoStoreModelStoreManagerInterface');
              $bas_url = $storeManager->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_WEB);
              ?>
              <a href="<?= $bas_url.'popupform.php' ?>?pro_id=<?= $_product->getId() ?>" class="action primary tocart" onclick="basicPopup(this.href);return false">ASK FOR DETAILS / ORDER SAMPLES</a>
          <button style="margin-top: 10px;"
          type="submit"
          title="<?= $block->escapeHtmlAttr($buttonTitle) ?>"
          class="action primary tocart"
          id="product-addtocart-button">
          <span><?= $block->escapeHtml($buttonTitle) ?></span>
          </button>
            <?= $this->getBlockHtml('product.buynow') ?>
            <?php echo $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>
<?php endif; ?>


<?php if ($block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/product/view/validation": {
                "radioCheckboxClosest": ".nested"
            }
        }
    }
</script>


<?php else : ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/js/validate-product": {}
        }
    }
</script>
<?php endif; ?>

<!-- for oflooring -->
<script type="text/javascript">
    function basicPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=500,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    }
</script>


<script>
    require([
        'jquery',
        'priceBox'
    ], function($){
        var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($_product->getId()) ?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes = priceBoxes.filter(function(index, elem){
            return !$(elem).find('.price-from').length;
        });

        priceBoxes.priceBox({'priceConfig': <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>});
    });
</script>


<!-- for oflooring -->