JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="form-group">
								<div class="col-sm-2">
									<label for="">Width <small>*</small></label>
									<input type="text" id="sales_width" name="sales_width" placeholder="Width" class="form-control" ng-model="sales_width" ng-pattern="/^[0-9]+\.?[0-9]*$/" required>
								</div>
								<div class="col-sm-2">
									<label for="">Height <small>*</small></label>
									<input type="text" id="sales_height" name="sales_height" placeholder="Height" class="form-control" ng-model="sales_height" ng-pattern="/^[0-9]+\.?[0-9]*$/" required>
									
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="row">
								<div class="col-sm-2">
									<label for="">Unit <small>*</small></label>
									<input type="text" id="sales_unit" name="sales_unit" placeholder="Unit" class="form-control" required>
								</div>
								<div class="col-sm-4">
									<label for="">Total Area <small>*</small></label>
									<input type="text" readonly id="sales_total_area" name="sales_total_area" class="form-control">
								</div>
								<div class="col-sm-4">
									<label for="">Price / Unit <small>*</small></label>
									<input type="text" id="sales_price_unit" name="sales_price_unit" placeholder="Price / Unit" class="form-control">
								</div>
								<div class="col-sm-2">
									<label for="">Quantity <small>*</small></label>
									<input type="text" id="sales_qty" name="sales_qty" placeholder="Qty" class="form-control" ng-model="sales_qty" ng-pattern="/^[0-9]+\.?[0-9]*$/" required>
									<span ng-messages="formSales.sales_qty.$error" ng-if="formSales.sales_qty.$dirty">
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="row">
								<div class="col-sm-6">
									<label for="">Sub Total<small>*</small></label>
									<input type="text" readonly id="sales_sub_total"...

JavaScript

$('#sales_width, #sales_height').keyup(function(){
                var width = parseFloat($('#sales_width').val()) || 0;
                var height = parseFloat($('#sales_height').val()) || 0;

                $('#sales_total_area').val((width * height).toFixed(2));
            });

            $('#sales_price_unit').keyup(function(){
                var price_unit = parseFloat($('#sales_price_unit').val()) || 0;
                var total_area = parseFloat($('#sales_total_area').val()) || 0;

                $('#sales_sub_total').val((price_unit * total_area).toFixed(2));
            });

            $('#sales_qty').keyup(function(){
                var qty = parseFloat($('#sales_qty').val()) || 0;
                var sub_total = parseFloat($('#sales_sub_total').val()) || 0;
                var vat = 0.12;

                var sales_total = $('#sales_total').val((qty * sub_total).toFixed(2));

                $('#sales_vat').val((sales_total * vat).toFixed(2));
            });