JSFiddle - React, Tailwind, and code Playground

by jkdaza

HTML

<table class="fotm-table">                       

                        <tr>
                            <td class="text-right" width="120">
                                <span id="ContentPlaceHolder1_lblFinancialYear">Financial Year :</span>
                            </td>
                            <td>
                                <span>
                                    <input type="text" id="txtFinancialYearFrom" 
									name="ctl00$ContentPlaceHolder1$txtFinancialYearFrom">
                                </span>
                            </td>
                            <td width="20" align="center">
                                <span style="align-content: center">to</span>
                            </td>
                            <td>
                                <span>
                                    <input type="text" id="txtFinancialYearTo" 
									name="ctl00$ContentPlaceHolder1$txtFinancialYearTo">
                                </span>
                            </td>
                        </tr>                        
                    </table>

JavaScript

/* Loop through all table rows */
$('tr','table.fotm-table').each(function() {
   var tr = this;
    /* Cache all inputs a jquery object - you may want to specify which type    of input you are targeting i.e. $('input[type="text"]') */
   var inputs = $('input',tr);
    /* Cache the slave (second in the example) input in a jquery   object - you can do the same for multiple inputs, simply by   modifying the eq() index parameter
    */
   var slaveInput = inputs.eq(1);
    /* Listen for changes on the master input */
   var masterInput = inputs.eq(0).on('change',function() {
   /* Do smt on the slave input - fill it with the next year in  the example */
       var year = $(this).val(); 
       var followingYear = parseInt(year,10)+1
       slaveInput.val(followingYear);
   });
});