JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<input name="pay" class="pay_me" id="4" type="checkbox" value="6.00" />
<input name="pay" class="pay_me" id="5" type="checkbox" value="9.00" />
<input name="pay" class="pay_me" id="6" type="checkbox" value="3.00" />
<input name="pay" class="pay_me" id="9" type="checkbox" value="23.00" />

<input name="to_payme" id="to_payme" type="text" value="0.00" />

<input name="ids_to_update" id="ids_to_update" type="text" value="" />

JavaScript

$(document).ready(function() {
    $('.pay_me').change(function() {
        var t_payme = 0, ids = [];
        $('.pay_me:checked').each(function() {
            ids.push(this.id);
            t_payme += parseFloat($(this).val());
        });
        t_payme = parseFloat(t_payme).toFixed(2);
        $('#to_payme').val(t_payme);
        $('#ids_to_update').val(ids.join('|'));
    });
});