<div class="myob-custom-calc-wrapper">
<p class="myob-custom-calc">
  <span>Annual salary $ </span>
  <input type="number" class="AnnualSalary" />
  <span>&nbsp;&nbsp;&nbsp;</span>
</p>
<p class="myob-custom-calc">
  <span>Standard weekly hours: </span>
  <input type="number" class="WeeklyHours" />
  <span>&nbsp;&nbsp;&nbsp;</span>
</p>
<hr />
<p class="myob-custom-calc">
  <span style="font-weight:bold;">Leave Loading Rate $ </span>
  <input type="number" class="total" />
  <span>&nbsp;&nbsp;&nbsp;</span>
</p>
</div>
<p />
<script>
  (function($) {
    var totalObj = $(".total");

    $(".AnnualSalary, .WeeklyHours").on("change keyup paste", function() {
      var AnnualSalary = parseFloat($(".AnnualSalary").val());
	  AnnualSalary = AnnualSalary / 52;
      var WeeklyHours = parseFloat($(".WeeklyHours").val());
	  WeeklyHours = WeeklyHours;
      totalObj.val(calcPercent(AnnualSalary, WeeklyHours));
    });

    function calcPercent(x, y) {
      if (x == undefined) {
        x = 0;
      }
      if (y == undefined) {
        y = 1;
      }
      let calc = (x / y) * 0.175;
      return calc.toFixed(2);
    }
  })(jQuery);

</script>
<style>
  .myob-custom-calc {
    text-align: right;
  }
.myob-custom-calc-wrapper {
	text-align: left;
	max-width: 330px;
	padding: 40px;
	border: 1px solid #DCDFE1;
}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
	font-size: 16px;
	line-height: 1.5;
	text-align: right;
	padding-right: 5px;
	width: 60px;
}
</style>