JSFiddle - React, Tailwind, and code Playground

by sushanth009

JavaScript

jQuery(function() {
    // Insert all the input corresponding to the textboxes initially
    jQuery("#endowment input[type='text']").each(function(i) { // Use i in each as iterator to store the data-attribute
        // Store the value of the textbox in the data-id attribute
        $(this).attr('data-id', i);
        var end_fund = '<input type="hidden" name="fund[]" data-param="title-' + i + '" value="' + jQuery(this).attr('title') + '">';
        var end_amount = '<input type="hidden" name="amount[]" data-param="value-' + i + '" value="">';
        jQuery('#dyn_hidden').append(end_fund, end_amount);
    });

    // Blur function of text box
    jQuery("#endowment input[type='text']").blur(function() {
        // Just change the value of corresponding input field..
        if (this.value !== "") {
            var $index = $(this).data('id');
            // Find the hidden input with data-param= "value + $index  inside
            // the #dyn_hidden  div  
            // And then set the value to it...
            $('#dyn_hidden input[data-param="value-' + $index + '"]').val(this.value);
        }
    });
});