JSFiddle - React, Tailwind, and code Playground

HTML

Income: <input id='preIncome' type='text' /><br/>
<button id='calculate'>Calculate</button><br/>
Medicare: <input id='medicare' type='text' /><br/>
Deducted Income:<input id='postIncome' type='text' />

JavaScript

s    // I am using a javascript library called jQuery.
    $(function(){
        // On clicking the Calculate button
        $('#calculate').on('click', function(){
      
            // Get the value of user supplied income from the textbox
            var income = parseInt($('#preIncome').val().trim()),
                postIncome = 0,
                medicare = 0;
            console.log(income);
            if(income > 0){
                // Calculation below needs to replace Medicare above
                if (income>0 && income<=19404) {
                    medicare = (income*0)/100;
                }
                else if (income>19404 && income<=22828) {
                    medicare = (income*10)/100;
                }
                else if (income>22828) {
                    medicare = (income*1.5)/100;
                }
                // Calculate the new income based on derived medicare value
                postIncome = income - medicare;
            }
            // Set the new medicare and income values to the textboxes
            $('#postIncome').val(postIncome);
            $('#medicare').val(medicare);
        });
    });