Ajax and php mysql auto calculate for invoice submision and print

Question

I am creating a quotation invoice using ajax, php and mysql

I am stuck on making inputs to make calculations and submission of the form and be able to print invoice or save to pdf format

Note the other thing is when I add a new line, it refreshes the above items inputs and deletes the select item..

$(document).on('click', '.addNewLine', function() {

  var html = '<div class="space-15"></div><div class="row sline">\n' +
    '                        <div class="col-md-5"><div class="displayItemDropdown"></div></div>\n' +
    '                        <div class="col-md-1"><input type="text" name="Quantity[]" id="Quantity" data-srno="1" class="form-control" placeholder="Qty" required /></div>\n' +
    '                        <div class="col-md-2"><input type="text" name="price[]" id="Price" data-srno="1" class="form-control" placeholder="Price" required /></div>\n' +
    '                        <div class="col-md-3"><input type="text" name="total[]" id="Total" data-srno="1" class="form-control" placeholder="Total" disabled /></div>\n' +
    '                        <div class="col-md-1"><input type="button" name="removeLine" class="removeLine btn btn-danger btn-xs" value="X"></div>\n' +
    '                    </div>';


  $(".div_field").append(html);

  $(".div_field").on('click', '.removeLine', function() {
    $(this).closest('.sline').remove();

  });

  displayItem(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form method="post" action="" enctype="multipart/form-data">
  <div class="row">
    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 text-danger">
      Customer Name *
    </div>
    <div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
      <div id="displayCustomerDropdown" class=""></div>
      <a href="" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-xs"><i class="fa fa-plus"></i> Add customer</a>
      <div class="row">
        <div id="ans">
        </div>
      </div>

    </div>
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"></div>
  </div>
  <div class="space-15"></div>
  <div class="ibox-content">
    <div class="space-15"></div>
    <div class="row">
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 text-danger">
        Date *
      </div>
      <div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
        <div class="form-group" id="data_1">
          <div class="input-group date">
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
            <input type="text" class="form-control" name="adjustmentDate" value="2022-02-28" required>
          </div>
        </div>
        <!-- /.form group -->
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
        Quotation #
      </div>
      <div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
        <div id="orderNumber"></div>
      </div>
    </div>
    <div class="space-15"></div>
    <div class="row">
      <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
        Reference #
      </div>
      <div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
        <input type="text" class="form-control" placeholder="Reference number" name="referenceNumber">
      </div>
    </div>
    <div class="space-20"></div>
    <div class="row">
      <div class="row">
        <div class="col-md-5"><label>Item Details</label></div>
        <div class="col-md-1"><label>Qty</label></div>
        <div class="col-md-2"><label>Price</label></div>
        <div class="col-md-3"><label>Total</label></div>
        <div class="col-md-1"></div>
      </div>
      <div class="div_field">
        <div class="row sline">
          <div class="col-md-5">
            <div class="displayItemDropdown"></div>
          </div>
          <div class="col-md-1"><input type="text" name="Quantity[]" value="0" id="Quantity" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Qty" required /></div>
          <div class="col-md-2"><input type="text" name="price[]" value="0" id="Price" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Price" required /></div>
          <div class="col-md-3"><input type="text" name="total[]" value="0" id="Total" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Total" disabled /></div>
          <div class="col-md-1"></div>
        </div>
      </div>
    </div>
    <div class="space-15"></div>
    <button type="button" class="addNewLine btn btn-warning btn-xs"><i class="fa fa-plus"></i> Add new line</button>
    <a href="" class="btn btn-success btn-xs" data-toggle="modal" data-target="#addItem"><i class="fa fa-plus"></i> New Item</a>
    <hr />
    <div class="space-20"></div>
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <label>Customer Notes</label>
        <textarea title="Customer Notes" placeholder="Enter any notes to be displayed on this transaction" name="comments" class="form-control"></textarea>
        <div class="space-20"></div>
      </div>

      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-muted">
        <div class="space-15"></div>
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <label>Sub Total</label>
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <input type="text" name="subtotal" value="0" id="subtotal" onFocus="startCalc();" onBlur="stopCalc();" class="form-control text-right" disabled>
          </div>
        </div>
        <div class="space-15"></div>
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <label>Discount (%)</label>
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <input type="text" name="discount" placeholder="Discount" class="form-control">
          </div>
        </div>
        <div class="space-15"></div>
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <label>VAT</label>
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <select name="tax" data-placeholder="Choose Item..." class="form-control select2 chosen-select" tabindex="2" autofocus required>

              <?php
                                $vat=vat();
                                while ($tax=mysqli_fetch_array($vat)) {
                                    ?>
                <option value="<?php echo $tax['tax_rate'];?>">
                  <?php echo $tax['taxName'];?>
                </option>
                <?php
                                }
                                ?>
            </select>
          </div>
        </div>
        <div class="space-15"></div>
        <div class="row">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <label>Total</label>
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
            <input type="text" name="total" class="form-control text-right" disabled>
          </div>
        </div>
        <div class="space-15"></div>
      </div>
    </div>
    <div class="space-20"></div>
    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <label>Terms & Conditions</label>
        <textarea title="Terms & Conditions" placeholder="Enter your business terms and condition to used this transaction" name="paymentTerms" class="form-control"></textarea>

      </div>
    </div>

    <hr />
    <button type="submit" name="AddItem" class="btn btn-primary">Complete Quotation</button>
    <button type="reset" class="btn btn-white" data-dismiss="modal">Cancel</button>


  </div>
</form>