how to add an item to cart using same function for all add to cart button - e-commerce

Question

//universal variables for cart {
var cart = document.createElement('div');
document.body.appendChild(cart);
cart.id = "cart";
var itemshow = document.createElement('div');
document.getElementById('cart').appendChild(itemshow);
itemshow.id = "itemshow";
var itm1 = document.createElement('div');
document.getElementById('itemshow').appendChild(itm1);
itm1.id = "itm1";
var itd = document.createElement('div');
document.getElementById('itemshow').appendChild(itd);
itd.id = "itd";
var itm_title_1 = document.createElement('div');
document.getElementById('itd').appendChild(itm_title_1);
itm_title_1.id = "itm_title_1";
var quan = document.createElement('div');
document.getElementById('itd').appendChild(quan);
quan.id = "quan";
var sub1 = document.createElement('button');
document.getElementById('quan').appendChild(sub1);
sub1.id = "sub";
sub1.innerHTML = "-";
var qu1 = document.createElement('span');
document.getElementById('quan').appendChild(qu1);
qu1.id = "qu";
var add1 = document.createElement('button');
document.getElementById('quan').appendChild(add1);
add1.id = "add";
add1.innerHTML = "+";
var span1 = document.createElement('span');
document.getElementById('quan').appendChild(span1);
span1.id = "span1";
span1.innerHTML = "10 quantity is allowed per order";
var rtm1 = document.createElement('button');
document.getElementById('itd').appendChild(rtm1);
rtm1.id = "rtm";
rtm1.innerHTML = "Remove Item";
var total_itm_value = document.createElement('div');
document.getElementById('itd').appendChild(total_itm_value);
total_itm_value.id = "total_itm_value";
var iqp1 = document.createElement('div');
document.getElementById('itd').appendChild(iqp1);
iqp1.id = "iqp";
var q1 = document.createElement('div');
document.getElementById('iqp').appendChild(q1);
q1.id = "q";
var iq1 = document.createElement('div');
document.getElementById('iqp').appendChild(iq1);
iq1.id = "iq";
var tp1 = document.createElement('div');
document.getElementById('itd').appendChild(tp1);
tp1.id = "tp";
var price1 = document.createElement('div');
document.getElementById('tp').appendChild(price1);
price1.id = "price";
price1.innerHTML = "price : ";
var p1 = document.createElement('div');
document.getElementById('tp').appendChild(p1);
p1.id = "p";
//function for add to cart for only one item
document.getElementById('btn1').onclick = function() {myFunc()};
document.getElementById('btn2').onclick = function() {myFunc()};
let quantity = 1;
let price = 19;
function myFunc() {
var x = document.getElementById('itm_img_1');
var w = document.getElementById('itm_img_2');
btn1onclick = document.getElementById('btn1');
btn2onclick = document.getElementById('btn2');
if (btn1onclick.onclick) {
document.getElementById('itm1').innerHTML = x.innerHTML
}
else if (btn2onclick.onclick) {
document.getElementById('itm1').innerHTML = w.innerHTML
}
/*document.getElementById('itm1').innerHTML = x.innerHTML;*/
document.getElementById('qu').innerHTML =
quantity;
document.getElementById('iq').innerHTML = quantity;
document.getElementById('p').innerHTML = price;
var z = document.getElementById('itm_title');
document.getElementById('itm_title_1').innerHTML = z.innerHTML;
document.getElementById('rtm').style.display = "inline-block";
var y = document.getElementById('itemshow');
if (y.style.display= "none") {
y.style.display = "flex";
}
var cart = document.getElementById('cart')
cart.style.display = "inline-block";
//function for increment product quantity
document.getElementById('add').onclick = function() {add()};
function add() {
quantity = quantity + 1;
if (quantity <= 10 ) {
var qu = document.getElementById('qu'); qu.innerHTML = quantity;
document.getElementById('sub').disabled = false;
document.getElementById('iq').innerHTML = quantity;
document.getElementById('p').innerHTML = ((Number(quantity)) * (Number(price)));
}
}
//function for decrement product quantity
document.getElementById('sub').onclick = function() {sub()};
function sub() {
quantity = quantity - 1;
if (quantity <= 1) {
document.getElementById('sub').disabled = true;
}
else if (quantity >= 1){
document.getElementById('sub').disabled = false;
}
var qu = document.getElementById('qu'); qu.innerHTML = quantity;
document.getElementById('iq').innerHTML = quantity;
document.getElementById('p').innerHTML = ((Number(quantity)) * (Number(price)));
}
// function for total item value
document.getElementById('total_itm_value').innerHTML = "total";
document.getElementById('q').innerHTML = "quantity :";
// function for remove item from cart
document.getElementById('rtm').onclick = function() {rtm()};
function rtm() {
document.getElementById('itemshow').style.display = "none";
quantity = quantity / quantity;
document.getElementById('qu').innerHTML = quantity;
document.getElementById('cart').style.display = "none";
}
}
////////////////
.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">
Visit Milton Store
</div>
<hr>
<div class="price">$19</div>
<div class="btn">
<button class="btn1" id="btn1">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">
Visit Milton Store
</div>
<hr>
<div class="price">$19</div>
<div class="btn">
<button class="btn2" id = "btn2">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">
Visit Milton Store
</div>
<hr>
<div class="price">$19</div>
<div class="btn">
<button class="btn1">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">
Visit Milton Store
</div>
<hr>
<div class="price">$19</div>
<div class="btn">
<button class="btn1">Add to Cart</button>
</div>
</div>
</div>
</div>
</body>
**i was declared all variables in js. and calling same function (myFunc()) when add to cart button clicked on on first two buttons of add to cart. only first item is adding on clicking second button of add to cart not adding the second item. and also function (myFunc()) is not adding for other items **
add to cart is adding only first item.
i was declared all variables in js. and calling same function (myFunc()) when add to cart button clicked on on first two buttons of add to cart. only first item is adding on clicking second button of add to cart not adding the second item. and also function (myFunc()) is not adding for other items