Why is this happening. Well JavaScript does not work with decimals but stores numeric values as double precision floating point numbers (a 64 bit binary number). Unfortunately, not all decimals can be represented accurately as a binary value.

To work around this issue, we could convert our decimal number into an integer, perform the calculation and then move the decimal point back.

Or you could employ a JavaScript number library such as bignumber.js (found at https://github.com/MikeMcl/bignumber.js/). BigNumber.js stores your number as an object, converting it to a coefficient, exponent, and sign. You can the use a number of exposed methods to perform arithmetic operations or output the result in various formats.

Below I have created a calculator that takes two numbers (Unit Cost) and (Quantity) and then calculates the result using the bignumber.js plugin. The magic is all performed on lines 82 and 83 where we convert the two values to a BigNumber object. Then line 90 let result = unit_cost.multipliedBy(quantity).decimalPlaces(2); multiplies the two numbers together rounding the result to two decimal points.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
    <title>Rounding Calculator</title>
    <style>
        .form-group {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Rounding Calculator</h1>

    <div class="row form-group highlight-addon">
        <label class="control-label col-sm-2" for="calculator-unit_cost">Unit Cost</label>
        <div class="col-sm-3">
            <input type="text" class="form-control text-right" id="calculator-unit_cost" name="calculator[unit_cost]" value="0.105">
        </div>
    </div>

    <div class="row form-group highlight-addon">
        <label class="control-label col-sm-2" for="calculator-quantity">Quantity</label>
        <div class="col-sm-3">
            <input type="text" class="form-control text-right" id="calculator-quantity" name="calculator[quantity]" value="11305">
        </div>
    </div>

    <div class="row form-group highlight-addon">
        <label class="control-label col-sm-2" for="calculator-result">Result</label>
        <div class="col-sm-3">
            <input type="text" class="form-control text-right" id="calculator-result" name="calculator[result]" readonly>
        </div>
    </div>

    <div class="row form-group">
        <button id="calculate" type="button" class="col-sm-3 offset-sm-2 btn btn-outline-primary">Calculate</button>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/9.0.1/bignumber.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
    // Format number plugin
    (function($) {
        $.fn.formatNumber = function(options) {
            var settings = $.extend({
                decimal_places: 2,
                separator: ','
            }, options);

            this.each(function() {

                let value = setDecimalPlaces($(this).val());
                value = setSeparator(value);
                $(this).val(value);

                // Returns value to x decimal places
                function setDecimalPlaces(value)
                {
                    var decimal = parseFloat(value);
                    if(isNaN(decimal)) decimal = 0;
                    return decimal.toFixed(settings.decimal_places);
                }

                function setSeparator(value)
                {
                    return value.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
                }
            });
        };
    }(jQuery));


    $("#calculate").click(function() {
        // Get numbers to multiply
        let unit_cost = new BigNumber($("#calculator-unit_cost").val());
        let quantity = new BigNumber($("#calculator-quantity").val());

        // If Not a Number (NaN) set values to zero
        if (unit_cost.toString() == 'NaN') unit_cost = new BigNumber(0);
        if (quantity.toString() == 'NaN') quantity = new BigNumber(0);

        // Calculate total
        let result = unit_cost.multipliedBy(quantity).decimalPlaces(2);

        // Update total
        $("#calculator-result").val(result).formatNumber({decimal_places: 2, separator: ','});
    });

</script>
</body>
</html>