shopify liquid add to cart button

Question

I am new to shopify theme development and I'm building a theme from scratch to gain experience. I'm having trouble with the 'add to cart' button on my product page. Even though I have various product options for a product, I am only displaying the 'size' options as radio buttons and then I take an input quantity and add it to the cart. The problem I am facing right now, is that the cart only adds 1 item at a time, So even if I input 3 or 4 as my quantity, the cart only adds 1 as the quantity. here's my code:

{% form 'product', product %}
        <div>
            <p class="option-title">Size</p>
            <div class="line"></div>
            <div class="options">
                {% for product_option in product.options_by_name['Size'].values %} 
                    <input type="radio" id = "{{ product_option }}" name="size" value="{{ product_option }}" > 
                    <label for="{{ product_option }}">{{ product_option }}</label> 
                {% endfor %}
            </div>
        </div>

        <div class="line"></div>

        <div class="quantity-add">
            <div class="input-quantity">
                <input class="input-quantity" type="number" min="1" placeholder="1"> 
                <input type="hidden" name="id" data-productid="{{ product.variants[0].id }}" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
            </div>
            <div class="cart-button">
                <button class="cart-btn" type="submit" value="Add To Cart">ADD</button> 
            </div>
        </div>     
    {% endform %}

Any help will be much appreciated. I am so lost regarding how I should fix it.

Answer 1

It should work fine if you add the proper name and value attribute to your input element:

<input name="quantity" value="3">

This would add the selected variant ID three times to the cart.