JSFiddle - React, Tailwind, and code Playground

by hedint

HTML

<form id='payment_form'>
    <input type='hidden' name='cost' value = '1000000'/>
    <input type='hidden' name='paid' value = '150000'/>
    <div>
        <label>Сумма платежа</label>
        <input type='text' name='paypart1' class='paypart'/>
    </div>
    <div>
        <label>Сумма платежа</label>
        <input type='text' name='paypart2' class='paypart'/>
    </div>
    <div>
        <label>Сумма платежа</label>
        <input type='text' name='paypart3' class='paypart'/>
    </div>
    <div> 
        <button id='result'>Отправить</button>
    </div>
</form>

CSS

form div
{
    margin-bottom:5px;
}

JavaScript

PaymentForm = function(form_id,input_class)
{
    var that = this;
    that.form = $('#'+form_id);
    that.payparts_input = $('.'+input_class);
    that.payparts_count = that.payparts_input.length;
    that.cost = $('input[name=cost]',that.form);
    that.paid = $('input[name=paid]',that.form);
    that.real_summ = that.cost-that.paid;
    that.parse = function()
    {
        that.payparts_input.each(
            function(index,element)
            {
                $(element).attr({'number':index+1});
                if (index>1)
                    $(element).attr({'disabled':'disabled'});
            }
        );
    }
    that.verification = function()
    {
        var summ = 0;
        that.payparts_input.each(
            function(index,element)
            {
                summ = summ + +$(element).val();
            }
        );
        if (summ = that.real_summ)
            return true;
        return false;
    }
    that.initEvents = function()
    {
        that.payparts_input.change(
            function()
            {
                var current_number = $(this).attr('number');
                
            }
        );
    }
    that.init = function()
    {
        that.parse();
    }
}
form = new PaymentForm('payment_form','paypart');
form.init();