JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="content">   

                        <div data-type="horizontal"  data-role="controlgroup">
                            <a href="#foo"   data-role="button">Input</a>
                            <a href="#foo1"  id="output-button" data-role="button">Output</a>
                        </div>



                            <input type="number" min="500" max="10000" step="100" name="monthly-income" id="monthly-income" value=""/>



                            <input type="number"  min="500" max="10000" step="100" name="saving-per-month" id="saving-per-month" value=""/>



                            <input type="number" min="16" max="75" step="1" name="current-age" id="current-age" value=""/>

JavaScript

$(document).ready(function(){
    $('#current-age').blur(saveSettings);
    loadSettings();
    });
    function loadSettings() {
    $('#monthly-income').val(localStorage.income);
    $('#saving-per-month').val(localStorage.saving);
    $('#current-age').val(localStorage.age);
    }
    function saveSettings() {
    localStorage.age = $('#current-age').val();
    localStorage.saving = $('#saving-per-month').val();
    localStorage.income = $('#monthly-income').val();
    }