Как бы я создал простую корзину для покупок, в которую можно было бы нажимать на кнопки?

Question

Я работаю над своим первым веб-приложением, и это система управления рестораном. Я пытаюсь создать простую корзину покупок, которая заполняет элементы заказа при нажатии кнопок, которые представляют каждый элемент. Вот мой код для самих кнопок, но я понятия не имею, как сделать корзину для покупок на экране. Большое спасибо.

  <!--menu items-->
 <ul id="keyboard"> 
  <div class="card-body row no-gutters align-items-center fixed-center">

    <li class="letter" value="Beef Stew">Beef Stew</li>  
    <li class="letter">Cheese Grits</li>  
    <li class="letter">Beef Stroganoff</li>  
    <li class="letter clearl">Pork Chops</li>  
    <li class="letter">Onion Soup</li>  
    <li class="letter">Mac N' Cheese</li> 

    <li class="letter clearl">Spinach Lasagna</li>  
    <li class="letter ">Chicken Pot Pie</li>
</ul>  

<ul id="keyboard"> 
   <div class="card-body row no-gutters align-items-center fixed-center">       
     <li class="delete lastitem">Clear Order</li>  
     <li class="delete lastitem">Delete</li>
     <li class="submit">Checkout</li> 
 <br>
 <br>
 </div>
 </ul>
</div>