Multiple cart button with quantity dropdown under a repeater

I have a functionality where my page has more than one product and each product has separate quantity dropdown linked with an "Add to cart" button. When I click on he cart button, only that particular item quantity must be added to the cart. Further on the html side, the products are inside an repeater.

HTML code

<asp:Repeater ID="repeater" runat="server">
                <ItemTemplate>                      
                        <asp:HiddenField ID="itemid" runat="server" />
                        <h3 class="hdr hdr-tertiary">
                            <asp:Literal ID="itemLevelTitle" runat="server"></asp:Literal></h3>                        
                        <asp:Literal ID="itemDetailsLink" runat="server"></asp:Literal>
                        <asp:Literal ID="itemDetailsDivId" runat="server"></asp:Literal>
                        <asp:Literal ID="itemDetailsContent" runat="server"></asp:Literal>
                    </div>

                    <label for="quantity1"><strong>Quantity</strong></label>
                    <asp:DropDownList ID="qtydropdown" runat="server" Enabled="true" CssClass="quantity">
                        <asp:ListItem Value="1">1</asp:ListItem>
                        <asp:ListItem Value="2">2</asp:ListItem>
                        <asp:ListItem Value="3">3</asp:ListItem>
                        <asp:ListItem Value="4">4</asp:ListItem>
                        <asp:ListItem Value="5">5</asp:ListItem>
                        <asp:ListItem Value="6">6</asp:ListItem>
                        <asp:ListItem Value="7">7</asp:ListItem>
                        <asp:ListItem Value="8">8</asp:ListItem>
                        <asp:ListItem Value="9">9</asp:ListItem>
                        <asp:ListItem Value="10">10</asp:ListItem>
                    </asp:DropDownList>
                    <span class="cartbtn"><a class="btn-orange btn-simple btn-break-block" href="#">Add to Cart</a></span>
                    <span class="errorMsg" style="display: none;">Please enter a valid quantity.</span></div>
                    </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>

jQuery code for the cart button: 
 

 $('.cartbtn a').on('click', function (e) {
        var link = this;
        var itemname = $('#ctl00_MainContentHolder_lblName').html().replace(/Adopt a /g, '');
        var itemregexp = new RegExp(' ' + itemname, 'g');
        var level = $(link).parent().parent().prev('h3').html().replace(itemregexp, '');          
        var box = link.parentNode.previousSibling;
        var quant = box.id;
        var ddl = $(this).closest('div').find('select');
        var selectedValue = ddl.val();
        if (selectedValue >= 1) {
            $(box).next().next().css("display", "block");
        } else {
            $('.quantity').each(function () {

                dataLayer.push({
                    'gtmCategory': 'Page Type',
                    'gtmAction': 'Item details Add to Cart',
                    'gtmLabel': itemname + " combo  ("
                           
                


                    
                    


                
                           

                
Reply | Reply with Attachment
                               

 Alert Moderator