Pulling correct data from DRF API

I am wanting to use PATCH method to amend the quantity of an item dependent on the action been add or remove. Add seems to be working perfectly as it only requires the product_id parameter. But when I want to remove to reduce quantity by 1 I believe I need to be using the cart item id.

My issues are retrieving this ID so I can define it and pass it through my url.

This is my current script;

<script>
    const updateBtns = document.querySelectorAll('.update-cart');
    const user = '{{request.user}}';
    for(let i = 0; i < updateBtns.length; i++) {
        updateBtns[i].addEventListener('click', function(){
            event.preventDefault(); // prevent page from refreshing
            const productId = this.dataset.product;
            const action = this.dataset.action;
            console.log('productId:', productId, 'action:', action);
            console.log('USER:', user);
            createCart(productId, action);
        });
    }
    function createCart(productId, action, cartId) {
        var csrftoken = getCookie('csrftoken');
        console.log('User is logged in, sending data...');
        fetch('/get_cart_id/')
            .then(response => response.json())
            .then(data => {
                const cartId = data.cart_id;
                console.log('Cart ID:', cartId); // log cartId in console
                
                let method, url;
                if (action === 'add') {
                    method = 'POST';
                    url = `/api/carts/${cartId}/items/`;
                } else if (action === 'remove') {
                    method = 'PATCH';
                    
                    url = `/api/carts/${cartId}/items/${THIS IS WHERE I NEED ITEM ID}/`; 
                } else {
                    console.log(`Invalid action: ${action}`);
                    return;
                }
                
                fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrftoken
                    },
                    body: JSON.stringify({
                        product_id: productId,
                        quantity: 1
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log(`Item ${action}ed in cart:`, data);
                });
            });
    }
    
</script>

The “id” field above the “product” field is the one I believe I need to access.

API REQUEST