JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="main" class="ui-content">
    <label for="income">income:</label>
    <input type="number" name="income" id="income" value="0">
<br>
    <label for="costs">costs:</label>
    <input type="number" name="costs" id="costs" value="0">
<br>
    <label for="social">social:</label>
    <input type="number" name="social" id="social" value="0">
<br>
    <label for="health">health:</label>
    <input type="number" name="health" id="health" value="0">
<br>
    <center><a href="#" data-role="button" data-inline="true" onclick="" id="clickMe">Check Your tax</a></center>
</div>

JavaScript

$(document).ready(function(){
    $("#clickMe").click(function() {
        var message = "Your tax is ";
        var income = $("#income").val();
        var costs= $("#costs").val();
        var social= $("#social").val();
        var health= $("#health").val();

        var aaa;
        var bbb;
        var ccc; 
        var tax;

        aaa = income-costs;
        bbb = aaa-social;
        ccc = bbb * 0.18 - 556.02;
        tax = ccc-health;
        console.log(tax);
    });
});