javascript element shopping-cart overwrite

when i clicked on add to cart the item is text is priniting. when clicked on other add to cart button the text is overwriting

function myFunc() {
  var cart = document.createElement('div');
  document.body.appendChild(cart);
  cart.id = "cart";
  var btn1 = document.getElementById('btn1');
  var btn2 = document.getElementById('btn2');
  var btn3 = document.getElementById('btn3');
  var btn4 = document.getElementById('btn4');
btn1.onclick = function() {item_1_cart()};
btn2.onclick = function() {item_2_cart()};
  function item_1_cart() {
    btn1.addEventListener("click", add_cart)
    function add_cart() {
      btn1.onclick = cart.innerHTML;
      cart.innerHTML = "hi";
    }
  }
    function item_2_cart() {
    btn2.addEventListener("click", add_cart)
    function add_cart() {
      btn2.onclick = cart.innerHTML;
      cart.innerHTML = "lalith";
    }
  }
}

.all {
  display: flex;
}
.item_container {
  display: flex;
  flex-direction: column;
  background-color: #ffcccc;
  width: 250px;
  border-radius: 6px;
  box-shadow: 10px 10px 30px;
  align-items: center;
  margin: 5%;
}
.itm_img  {
  padding: 2%;
}
.img {
  width: 200px;
  border-radius: 5px;
}
.itm_title {
  text-align: center;
}
h3 {
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0%;
}
a:link {
  color: #99ddff;
  text-decoration: none;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: #99ddff;
}
.price {
  font-weight: bold;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}
.link {
  text-align: center;
}
hr {
  margin: 4%;
}
.btn {
  margin-left: 32%;
  margin-top: 5%;
  margin-bottom: 6%;
}
.btn1, .btn2 {
  background-color: #80ffcc;
  border: none;
  padding: 5%;
  border-radius: 6px;
}
.btn1:hover, .btn2:hover {
  background-color: #80e5ff;
  transition: 0.5s;
  box-shadow: 5px 5px 10px;
}
#itemshow {
  display: none;
}

/*#cart {
  display: none;
  color: white;
  background-color: black;
  padding: 2%;
}
*/
#total_itm_value {
  font-size: 25px;
}
#iqp, #tp {
  display: flex;
}
.itm_title_1 {
  display: block;
}

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <div class="all">
    <div class="item_container">
      <div class="itm_img" id="itm_img_1">
        <img src="https://m.media-amazon.com/images/I/61X1b09mK0L._SL1500_.jpg" alt="img" class="img" id="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title" id="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id="btn1" onclick = "myFunc()">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id="itm_img_2">
        <img src="https://m.media-amazon.com/images/I/616G5-FDTvL._SX425_.jpg" alt="img" class="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn2" id = "btn2" onclick = "myFunc()">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id="itm_img_3">
        <img src="https://m.media-amazon.com/images/I/61nb1cWMOiL._SX679_.jpg" alt="img" class="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id = "btn3" onclick = "myFunc()">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id=".itm_img_4">
        <img src="https://m.media-amazon.com/images/I/61TYUKCL2IL._SX679_.jpg" alt="img" class="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id = "btn3" onclick = "myFunc()">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</body>

when i clicked on add to cart the item is text is priniting. when clicked on other add to cart button the text is overwriting. is there any other solution for this using javascript. iam begginer to javascript thank you in advance for answering my question when i clicked on add to cart the item is text is priniting. when clicked on other add to cart button the text is overwriting. is there any other solution for this using javascript. iam begginer to javascript thank you in advance for answering my question

Solution

The contents of the cart element are being updated because that's exactly what these lines of code do:

cart.innerHTML = "hi";
//...
cart.innerHTML = "lalith";

They set the innerHTML value of that element to that string. And that's all.

If you want to append instead of overwrite, you can append instead of overwrite:

cart.innerHTML += "hi";
//...
cart.innerHTML += "lalith";

Note the += operator. This operation is essentially a shorter version of this:

cart.innerHTML = cart.innerHTML + "hi";
//...
cart.innerHTML = cart.innerHTML + "lalith";

Note how it makes use of the existing value when constructing the new value. This will of course all be on the same line, so you might include a line break or some other markup as well:

cart.innerHTML += "<br/>hi";
//...
cart.innerHTML += "<br/>lalith";

How you define and manage your markup is up to you. The point is that if you want to retain the previous content then you need to include the previous content when setting the value.

As an aside, you also have a couple of logical problems here:

btn1.onclick = function() {item_1_cart()};
function item_1_cart() {
  btn1.addEventListener("click", add_cart)
  function add_cart() {
    btn1.onclick = cart.innerHTML;
    cart.innerHTML = "hi";
  }
}

You are assigning a click handler, and then within that click handler you assign another click handler. Additionally, within that second click handler, you assign text as a new click hander, which makes no sense at all.

This is why:

You need to click more than once to see the initial output.
Subsequent outputs are doubled.

Don't re-assign an entirely new click handler, and don't do confusing and nonsensical things like assigning text as a click handler. Just assign the handler that performs the logic you want:

btn1.addEventListener("click", item_1_cart)
function item_1_cart() {
  cart.innerHTML += "<br/>hi";
}

The same is of course true for your other click handler(s).