JSFiddle - React, Tailwind, and code Playground

HTML

<form>

    <div class="form-group">
        <label>ID:</label>
        <input type="text" class="form-control" id="idDigitado" placeholder="id" disabled>
    </div>

    <div class="form-group">
        <label>Valor:</label>
        <input type="text" class="form-control" id="valorDigitado" placeholder="valor" required>
    </div>

    <button type="button" class="btn btn-primary" id="botaoSalva">Salvar</button>

    <button type="button" class="btn btn-primary" id="exibeTabela">Exibir Tabela</button>

</form>


<div class="table-responsive">
    <table class="table table-striped tabela">
        <thead>
            <tr>
                <th>#</th>
                <th>Header</th>
            </tr>
        </thead>
        <tbody id="corpo">
            <tr id="conteudoTabela">
                <td>asf</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript

$(document).ready(function() {
    
    var idDigitado = 0;
    var valorDigitado = 0;
    var indiceGeral = sessionStorage.length + 1;
    $("#idDigitado").val(indiceGeral);
    $("#botaoSalva").click(function() {
        pegaCampos();
    });

    function pegaCampos() {
        idDigitado = $("#idDigitado").val();
        valorDigitado = $("#valorDigitado").val();
        $("#alerta").text(idDigitado + "-" + valorDigitado);
        salva();
    }

    function salva() {
        sessionStorage.setItem(idDigitado.valueOf(), valorDigitado);
        //atualizaTabela();
        atualizaIndice();
        console.log(sessionStorage.length);
        console.log(sessionStorage);
    }

    /*
    function atualizaTabela(){
        for(var i=0; i < sessionStorage.length; i++){
            var indice = sessionStorage.key(i);
            $("table").append("<tr><td>"+sessionStorage.key(i)+"</td><td>"+sessionStorage.getItem(indice)+"</td></tr>");
        }
    }
    */

    function atualizaIndice() {
        var indiceGeral = sessionStorage.length + 1;
        $("#idDigitado").val(indiceGeral);
        console.log(sessionStorage.length);
        console.log(sessionStorage);
    }

    $("#exibeTabela").click(function() {
        //$(".table").append("<tr><td>"+sessionStorage.key(i)+"</td><td>"+sessionStorage.getItem(indice)+"</td></tr>");
        var quantidadeGravada = sessionStorage.length;
        for (var i = 1; i <= quantidadeGravada; i += 1) {
            var indice = i; //ALTERADO de sessionStorage.key(i)
            var value = sessionStorage[i];
            var linha = "<tr><td>" + indice + " - " + value + "</td></tr>";
            $(".tabela").append(linha);

            var quantidadeLinhas = $(".tabela tbody tr").length;
            console.log(quantidadeLinhas);
        }
    });
});