JSFiddle - React, Tailwind, and code Playground

by Bandon

HTML

<p>website_charges
    <input name="website_charges" id="website_charges" type="text" value="" />
</p>
<p>monthly_fixed_charges
    <input name="monthly_fixed_charges" id="monthly_fixed_charges" type="text" value="" />
</p>
<p>members_registered
    <input name="members_registered" id="members_registered" type="text" value="" />
</p>
<p>per_member
    <input name="per_member" id="per_member" type="text" value="" />
</p>
<p>monthly_sessions
    <input name="monthly_sessions" id="monthly_sessions" type="text" value="" />
</p>
<p>per_session
    <input name="per_session" id="per_session" type="text" value="" />
</p>
<p>total_dues
    <input name="total_dues" id="total_dues" type="text" value="" />
</p>
<p>paid_amount
    <input name="paid_amount" id="paid_amount" type="text" value="" />
</p>
<p>balance
    <input name="balance" id="balance" type="text" value="" />
</p>
<button>Add</button>

JavaScript

$("button").click(function () {
    $(this).parent().append('<p>member_total_charges<input name="member_total_charges" id="member_total_charges" type="text" value="" /></p><p>session_total_charges<input name="session_total_charges" id="session_total_charges" type="text" value="" /></p>');
});

$("#member_total_charges, #session_total_charges").live("change", function () {
    var memtc = parseInt($('#member_total_charges').val()) || 0;
    var sestc = parseInt($('#session_total_charges').val()) || 0;
    var sitec = parseInt($('#website_charges').val()) || 0;
    $("#total_dues").val(memtc + sestc + sitec);
});