JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Unglaublich kreative Überschrift</h1>
            
        <table id="liste" width="200">
            <tr>
                <th>Artikel</th>
                <th>Preis</th>
            </tr>
        </table>
          
            <p> Weitere Eingabe <button id="show"> + </button>
            </p>
          
        <div id="eingabe">
            <input type="text" id="artikel">
            <input type="text" id="preis">
            <button id="submit">Ok</button>
        </div>
            
            <p>
                Der Endbetrag: <u id="betrag">0</u> €
            </p>

CSS

p {margin:.5em;}
h2 {margin:.5em;}
table {margin: .5em;}

JavaScript

$(document).ready(function(){
    $('#eingabe').hide();
       $('#show').click(function(){
           $('#eingabe').show();
       });
       $('#submit').click(function(){
          var artikel = $('#artikel').val();
          var preis = $('#preis').val();
          var betrag_alt = $('#betrag').text();
          var betrag_neu = parseFloat(preis)+parseFloat(betrag_alt);
          $('#eingabe').hide();
          $('#liste').append('<tr><td>'+artikel+'</td><td>'+preis+' €</td></tr>');
          $('#betrag').html(betrag_neu);
          $('#artikel').val('');
          $('#preis').val('');
       });
});