js1

let cart = {}
let smallCart = []

let menu = [
{id: "a111", title: "пробный", titleColor: '#65ec5d', ul:["Салат", "Первое блюдо", "Второе блюдо"], img: 'img/porridge.jpg', cost: 40},
{id: "a112", title: "title", titleColor: '#efd943', ul:["Салат", "Второе блюдо"], img: 'img/porridge.jpg', cost: 55},
{id: "a113", title: "classic", titleColor: '#b9f6ed', ul:["Салат", "Первое блюдо", "Второе блюдо"], img: 'img/porridge.jpg', cost: 65},
{id: "a114", title: "full", titleColor: '#f8808e', ul:["Салат", "Первое блюдо", "Второе блюдо", "Десерт дня"], img: 'img/porridge.jpg', cost: 75}
]

let find = function (arg) {
    let c = ""
    for(let f of arg){
        c+="<li><span>"+f+"</span></li>"
    }
    return c
}

console.log(menu)

for(let key of menu){
    let block = `<div class="col-3"> <div class="menu_program_block">
                        <h3 class="menu-block-title">${key.title}</h3>
                        <ul class="menu-block-menu">
                            ${find(key.ul)}
                        </ul>
                        <hr>
                        <div class="counter-and-price">
                            <div class="counter">
                                <div class="counterMinus" data-art=${key.id} price=${key.cost}>-</div>
                                <p class="${key.id}Counter">0</p>
                                <div class="counterPlus" data-art=${key.id} price=${key.cost}>+</div>
                            </div>
                            <div class="price"><p>40грн</p>
                            </div>
                        </div>
                        <div class="addtocart1" data-art=${key.id} price="${key.cost}">
                        </div>
                        </div>`
    document.querySelector(".programms1").innerHTML+=block;
    $(`.counterPlus`).on("click", plus);
    $(`.counterMinus`).on("click", minus);
}

//добавление в корзину

function plus() {
    let articul = $(this).attr("data-art")
    let cost1 = $(this).attr("price")
    console.log(($(this).attr("price")))
    if(cart[`${articul}`]==undefined){
        cart[`${articul}`] = { "amount": 1, "cost": cost1};
    }
    else{
        cart[`${articul}`].amount++
        cart[`${articul}`]["cost"]= cost1*cart[`${articul}`].amount
    }


    console.log(cart)
    console.log(document.querySelectorAll(`.${articul}Counter`))

    let counter1 = document.querySelectorAll(`.${articul}Counter`)

    for(let key in counter1){
        counter1[key].innerHTML=cart[`${articul}`].amount
    }
}

function minus() {
    let articul = $(this).attr("data-art")
    let cost1 = $(this).attr("price")
    console.log(cart)
    if(cart[`${articul}`].amount>0){
        cart[`${articul}`].amount--
        cart[`${articul}`]["cost"]= cost1*cart[`${articul}`]['amount']
    }
    let counter1 = document.getElementsByClassName(`${articul}Counter`)[0]
    counter1.innerHTML = cart[`${articul}`].amount
    if(document.getElementsByClassName(`${articul}Counter`)[1]){
    document.getElementsByClassName(`${articul}Counter`)[1].innerHTML=cart[`${articul}`].amount}
}

$("div.addtocart1").on("click", addToMiniCart);

function addToMiniCart() {
    let articul = $(this).attr("data-art")
    let cost1 = $(this).attr("price")
    console.log(cart)
    let dropCart = document.querySelector("#dropdowncart");
    let dropdownblock=`<div class="dropdown-cart-element" style="color: white; background: black;">
                        <p style="display: inline-block;">ТекстТекстТекст</p>
                        <div class="counter-smaller" style="color: white; background: black;">
                            <div class="counterMinus" data-art="${articul}" price="${cost1}">-</div>
                            <p class=${articul}Counter>${document.querySelectorAll(`.${articul}Counter`)[0].innerHTML}</p>
                            <div class="counterPlus" data-art= "${articul}" price="${cost1}">+</div>
                        </div>
                        <p class="price-dropdown-menu">165грн</p>
                        <img src="img/close-circle-line.jpg" alt="m">
                    </div>
                    <hr>`;
    if(smallCart.indexOf(articul)==-1){
        console.log(articul)
        console.log(`${articul}`)
        smallCart.push(`${articul}`)
        dropCart.innerHTML+=dropdownblock
    }
    $(`.counterPlus`).on("click", plus);
    $(`.counterMinus`).on("click", minus);
}