How to display objects as a list from JavaScript to HTML

Question

I am making a basic cart system. My goal is every time the Add to Cart button is clicked, the item is listed in the cart accordingly. I have accomplished only 2 rows, but when the 3rd item is clicked, it is added to the 3rd row but the 2nd row is replaced https://i.sstatic.net/Lxl6i.jpg. Also when the 3rd item is clicked first, none of the 1st and the 3rd item shows. Here's the HTML:

            <div class="item-section" id="item">
            <div class="item-container">
                <div class="item">
                    <div class="item-image-cont"></div>

                    <h3 class="item-desc">Wintermelon Milk Tea</h3>
                    <h4 class="item-price">₱29 / ₱40 / ₱55</h4>
                    <div class="addtocart-cont">
                        <buttonid="addCart1" class="addcartBTN">Add To Cart</button>
                    </div>
                </div>
                <div class="item">
                    <div class="item-image-cont2"></div>

                    <h3 class="item-desc">Matcha Milk Tea</h3>
                    <h4 class="item-price">₱30 / ₱45 / ₱60</h4>
                    <div class="addtocart-cont">
                        <buttonid="addCart2" class="addcartBTN">Add To Cart</button>
                    </div>
                </div>
                <div class="item">
                    <div class="item-image-cont3"></div>

                    <h3 class="item-desc">Chocolate Milk Tea</h3>
                    <h4 class="item-price">₱25 / ₱35 / ₱45</h4>
                    <div class="addtocart-cont">
                        <button  id="addCart3" class="addcartBTN">Add To Cart</button>
                    </div>
                </div>
                </div>
            </div>
        </div>

var cartslot1,cartslot2,cartslot3,cartslot4;
cartslot1 = document.getElementById("cartslot1");
cartslot2 = document.getElementById("cartslot2");
cartslot3 = document.getElementById("cartslot3");
cartslot4 = document.getElementById("cartslot4");
//Products
var winter = {
  itemName :"WinterMelon Milktea",
  smallPrice: "29",
  medPrice: "40",
  largePrice: "55"
}
var matcha = {
  itemName :"Matcha Milktea",
  smallPrice: "29",
  medPrice: "40",
  largePrice: "55"
}
var choco = {
  itemName :"Chocolate Milktea",
  smallPrice: "29",
  medPrice: "40",
  largePrice: "55"
}
var coffee = {
  itemName :"Coffee Milktea",
  smallPrice: "29",
  medPrice: "40",
  largePrice: "55"
}
//Event Listeners
var event1,event2,event3,event4;
event1 = document.getElementById("addCart1").addEventListener("click",cartAdd1);
event2 = document.getElementById("addCart2").addEventListener("click",cartAdd2);
event3 = document.getElementById("addCart3").addEventListener("click",cartAdd3);
event4 = document.getElementById("addCart4").addEventListener("click",cartAdd4);
function cartAdd1(){
  for(const i = 0; i<3; i++){
  switch(cartslot1.innerHTML){
    case "" :
      cartslot1.innerHTML = winter.itemName;
      break;
    case matcha.itemName||choco.itemName:
      cartslot2.innerHTML = winter.itemName;
      break;
  }
  if (cartslot2.innerHTML == choco.itemName){
    cartslot3.innerHTML = winter.itemName;
  }
  else if (cartslot2.innerHTML == matcha.itemName){
    cartslot3.innerHTML = winter.itemName;
  }
}
}
function cartAdd2(){
  for(const i = 0; i<3; i++){
  switch(cartslot1.innerHTML){
    case "" :
      cartslot1.innerHTML = matcha.itemName;
      break;
    case winter.itemName||choco.itemName:
      cartslot2.innerHTML = matcha.itemName;
      break;
  }
  if (cartslot2.innerHTML == choco.itemName){
    cartslot3.innerHTML = matcha.itemName;
  }
  else if (cartslot2.innerHTML == matcha.itemName){
    cartslot3.innerHTML = matcha.itemName;
  }
}
}


function cartAdd3(){
  for(const i = 0; i<3; i++){
  switch(cartslot1.innerHTML){
    case "" :
      cartslot1.innerHTML = choco.itemName;
      break;
      case matcha.itemName||winter.itemName:
      cartslot2.innerHTML = choco.itemName;
      break;
  }
  if (cartslot2.innerHTML == choco.itemName){
    cartslot3.innerHTML = choco.itemName;
  }
  else if (cartslot2.innerHTML == matcha.itemName){
    cartslot3.innerHTML = choco.itemName;
  }
}
}

Answer 1

something like this should help get you started on the right path.

let products ={winter:{
  itemName :"WinterMelon Milktea",
  smallPrice: "29",
  medPrice: "40",
  largePrice: "55"
},
matcha:{
  itemName :"Matcha Milktea",
  smallPrice: "29",
  medPrice: "40",
  largePrice: "55"
},
choco:{
  itemName :"Chocolate Milktea",
  smallPrice: "29",
  medPrice: "40",
  largePrice: "55"
},
coffee:{
  itemName :"Coffee Milktea",
  smallPrice: "29",
  medPrice: "40",
  largePrice: "55"
}}

let basket = document.getElementById('basket');



let select = document.getElementById('products')
select.addEventListener('change',function(){

   text = basket.innerHTML + "<br>";
   console.log(this.value)
   text = JSON.stringify(products[this.value]) 
   let p = document.createElement('p')
   p.innerHTML = text;

   basket.append(p)
})

<select name="products" id="products">
  <option value="winter">winter</option>
  <option value="matcha">matcha</option>
  <option value="choco">choco</option>
  <option value="coffee">coffee</option>
</select>

<div id='basket'>
</div>