JSFiddle - React, Tailwind, and code Playground

by MihayNagy

JavaScript

}
function buy() {
	class render_products {
		render() {
			products.product.forEach(elem => {
				elem.button.forEach(el => {
					el.addEventListener('click', function () {
						if (!el.classList.contains('active')) {
							let ok = true
							products.ul_del.querySelectorAll('li').forEach(el => {
								if (el.id === `ul_del${elem.id}`) {
									let number = document.getElementById(
										'p_number' + elem.id
									).innerHTML
									elem.number = parseInt(number) + 1
									document.getElementById('p_number' + elem.id).innerHTML =
										elem.number
									ok = false
								}
							})
							if (ok != false) {
								products.pos = parseInt(products.pos) + 1
								elem.number = parseInt(elem.number) + 1
								products.ul_name.innerHTML += `
							<li class='product__li' id='ul_name${elem.id}'><img class='product__img' src='${elem.img}'>
								<p class='product__text product__text-item1'>${elem.name}</p>
							</li>
							`
								products.ul_name_outcome.innerHTML += `
							<li class='outcome__li' id='ul_name_outcome${elem.id}'>							
								<p class='product__text product__text-item1'>${elem.name}</p>
							</li>
							`
								products.ul_number.innerHTML += `
							<li class='product__li' id='ul_number${elem.id}'>
								<div class='product__number-div'>
									<span class='product__minus-pluse' id='product__minus${elem.id}' onclick='products.num(${elem.id},-1)'>-</span>
										<p class='product__text product__text-item1' id='p_number${elem.id}'>${elem.number}</p>
									<span class='product__minus-pluse' id='product__pluse${elem.id}' onclick='products.num(${elem.id},1)'>+</span>
								</div>
							</li>
							`
								products.ul_total.innerHTML += `
							<li class='product__li' id='ul_total${elem.id}'>
								<p class='product__text product__text-item1' id='p_total${elem.id}'>${elem.price}&#8381</p>
							</li>
							`
								products.ul_total_outcome.innerHTML += `
							<li...