JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gestionale.odoyabooks.com/scripts/other_book_cost.js"></script>
<form action="" method="POST">
    <div class="yes">
        <div id="cost1" class="clonedCost" style="display: inline;">
            <table border="0">
                <tr>
                    <td>
                        <label class="total" for="total">Total 1</label>
                    </td>
                </tr>
                <tr>
                    <input class="input_ttotal" id="ttotal" type="text" name="ttotal[]" />
                    </td>
                </tr>
            </table>
        </div>
        <div id="addDelButtons_cost">
            <input type="button" id="btnAdd" value="+">
            <input type="button" id="btnDel" value="-">
        </div>
        <p>Sum is:<span id="sum">0</span>
        </p>
    </div>
</form>

JavaScript

$(document).ready(function () {
    $("form").on('keyup', '.input_ttotal', function() {
        calculateSum();
    });
});

function calculateSum() {
    
    var sum = 0;
    
    $(".input_ttotal").each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
        
    });
    $("#sum").html(sum.toFixed(2));
}