JSFiddle - React, Tailwind, and code Playground

HTML

<div class="salary-container">
                <h3 class="u-h4 u-margin-none">I want to see the breakdown for a salary of</h3>
                <span class="salary-input"><span class="salary-pound">£</span> <input type="number" min="17500" class="quantity input-text" name="quantity"></span>
                <button id="SubmitBtn" class="button submitbtn" value="Submit">Calculate</button>

            </div>

            <div class="valueDisplayed">
                <div class="valueDisplayed__item new-salary-container"">
                    <span class="result yearly font-bold"></span>
                </div>
            </div>

JavaScript

$(document).on('click', '.submitbtn', function (e) {
        e.preventDefault();

        var inputtedSalary = $(".quantity").val(),
            num = parseFloat(inputtedSalary),
            val = num - (num * .20),
            monthlyValue = (val / 12),
            dividedSum = monthlyValue - 2500,
            yearValue = $(".yearly"),
            newSalaryContainer = $('.new-salary-container');


        if (inputtedSalary === '') {
            yearValue.text('please enter a value');
        }

        if (inputtedSalary <= 17499) {
            yearValue.text('');

        } else if (inputtedSalary >= 17500) {
            yearValue.text(val);
        }

    });