Creating Tables with JQuery

I need to do a job with a system that every product I type on the left of the page, appears in a table on the right, I could already create the table without any padding, just with the header, but now I need to know how I do it each time you fill in the form in the corner, it appears in the table on the side, in a column that is right for it, and that each generate a new ID, it can be something like "1", then after it has been registered the next one is " 2 ", and so on, here are my codes

jquery

$("#btCadastrar").click(function () {

    var nome = $("#inNome").val();
    var produto = $("#inProduto").val();
    var entrada = $("#inEntrada").val();
    var descricao = $("#inDescricao").val();

    // todos atributos da página e seus valores já estão sendo pegos

    if (nome == "" || (produto == "" || (entrada === "")) || (descricao == "")) {
        alert("Preencha os campos corretamente")
        return;

    } else {
        alert("Cadastrado com sucesso")
    }

}); // fim dessa função

HTML

    <div class="form-group">
        Nome do Cliente: <input type="text" class="form-control" id="inNome">
    </div>
    <div class="form-group">
        Produto: <input type="text" class="form-control" id="inProduto">
    </div>
    <div class="form-group">
        Data de Entrada: <input type="text" class="form-control" id="inEntrada" placeholder="dd/mm/aaaa">
    </div>
    <div class="form-group">
        Descrição do Problema: <input type="text" class="form-control" id="inDescricao">
    </div>
    <input type="button" id="btCadastrar" value="Cadastrar" class="btn btn-dark mb-3">
</div>
<div class="float-right col-7 mr-2">
    <table class="table text-center" id="tabela">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Nome do Cliente</th>
                <th scope="col">Produto</th>
                <th scope="col">Data de Entrada</th>
                <th scope="col">Problema</th>
                <th scope="col">Opções</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row"></th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><button type="button" class="btn btn-danger">Finalizado</button></td>
            </tr>
</div>

How do I make a new line with the information appear each time the form is filled in?