JSFiddle - React, Tailwind, and code Playground

HTML

<form id="taxcalculator" style="height:150px;" action="#">
    
    <input type="text" size="20" id="city" name="city" />
    
    <div id="slider"></div>
    
    
    <div id="income_1" style="width:300px; margin:0 0 15px 0;">
        <select id="income_item_1" style="float:left; width:200px;">            
            <option value="0" selected="selected">0</option>        
            <option value="2.000">2.000</option>
            <option value="4.000">4.000</option>
        </select>
    </div>
    
    <input type="text" size="20" id="income2" name="income2" /><br>
    <input type="text" size="20" id="income3" name="income3" /><br>
    
    <input type="hidden" name="citytaxrate" id="citytaxrate"> <br>
    <input type="submit" name="submit" value="Go!" id="go-calc" class="ui-button"> <br>
    
</form>

JavaScript

$(document).ready(function() {

    function calculatesum() {
        alert('calculating sum');
    }

    function recalc() {
        alert('recalculating sum');
    }

    $('#taxcalculator').submit(function() {
        calculatesum();
        return false;
    });

    $('#go-calc').click(function() {
        calculatesum();
        recalc();
        return false;
    });

    /* //TRIGGERS ONLY WHEN THIS INPUT LOSES FOCUS
    $('#city').change(function() {
        var val = $('#citytaxrate').val(); // value of the hidden field
        alert('do something. Just call recalc() here if you want');
    });
    */

    //triggers every time they type something
    $('#city').keydown(function() {
        var val = $('#citytaxrate').val();
        alert('do something. Just call recalc() here if you want');
        
    });

});