adding a list of products to cart at once if the checkbox is checked

I have a list of products, with quantity, price and checkbox next to each picture and name of product, like below:

<div class="grid grid-cols-4 justify-items-center p-2" v-for="(product, index) in productsstore.Livres">
            <div class="flex items-center justify-start gap-4">
                <img class="w-16 p-0" :src="product.image_livre" />
                <p class="text-xl font-semibold">{{ product.nom }}</p>
            </div>

            <div class="flex items-center">
                <button @click="decrement(index)" class="border border-gray-400 px-2 py-1 rounded-l">
                    -
                </button>
                <input v-model="count[index]" class="border border-gray-400 text-center w-8 bg-transparent" />
                <button @click="increment(index)" class="border border-gray-400 px-2 py-1 rounded-r">
                    +
                </button>
            </div>
            <div class="flex items-center gap-4">
                <input type="checkbox" @click="updateChecked(index)" :checked="isChecked(index)" class="scale-150">
                <span class="font-semibold">{{ calculateprice(product.prix, count[index]) }}</span>
                <span>DHS</span>
            </div>


        </div>

I have an add to cart button at the bottom, and a totalprice label that calculates only the checked products prices, and I want to add the checked products only to cart taking in consideration the quantity and the price, I can’t seem to find any way, I tried to add an add to cart button next to each product, it worked but it’s not really what I want.

here’s my script for the functions I’m using:

const productsstore = useProductsStore()
        const cartstore = useCartStore()

        const count = ref(Array(productsstore.Livres.length).fill(1))
        
        const checked = ref(Array(productsstore.Livres.length).fill(true))
        

        function getcheckedd(){
            const names = checkedproducts.value
            console.log("this is it:"+ names)
        }
        function increment(index) {
            count.value[index]++;
        }

        function decrement(index) {
            if (count.value[index] > 1) {
                count.value[index]--;
            }
        }

        

        

        function calculateprice(productprice, qty) {
            return (productprice * qty).toFixed(2)
        }

        const updateChecked = (index) => {
            checked.value[index] = !checked.value[index]
        }

        const isChecked = (index) => {
            return checked.value[index]
        }

        

        

        const checkedTotal = computed(() => {
            let total = 0;
            for (let i = 0; i < checked.value.length; i++) {
                if (isChecked(i)) {
    
                    total += parseFloat(calculateprice(productsstore.Livres[i].prix, count.value[i]));
                }
            }
            
            return total.toFixed(2);
        })

I would appreciate any help as I’m really new to vue.js, that’s my actual first project.