Counting the number of appended elements for form submission

Question

I have a web page that is a dynamic form. It allows users to specify any number of Attributes to devices. These attributes can be select option lists. When the user selects this, they are presented with a button to add options.

My problem is that I need to know how many options there are for each attribute. I have tried using var counter=$('.class-name').next().val(); to try and count them alert(counter); to see if it works. But all I get is an alert of undefined so the var counter is not being initalised.

I need to know the number of options for each select list to be able to group them together and know which options go with a particular attribute. I cannot think of a way to do this through JS or PHP. I can get the options posted in the php but I can't identify what options go with each attribute.

Here is a fiddle!

Answer 1

Here is the code to get the lengths for each of the respective options.

$('.tattribute option:selected[value="text"]').length
$('.tattribute option:selected[value="checkbox"]').length
$('.tattribute option:selected[value="select-list"]').length
$('.tattribute option:selected[value="notes"]').length

Fiddle

Here is a fiddle with a hidden field added to keep track of the options count. Every time an option is added or removed the value of the hidden field is incremented or decremented. The changes are in the code below

var template="<div class=\"new-attribute\">"
                 + "<h3>New Attribute</h3>"
                 + "<label for=\"attributeName[]"+"\">Name:</label>"
                 + "<input class=\"attribute\" type=\"text\" name=\"attributeName[]"+"\">"
                 + "<input class=\"attribute_count\" type=\"hidden\" name=\"attributeCount[]"+"\">"
                 + "<label for=\"attributeType[]"+"\">Type:</label>"
                 + "<select class=\"tattribute\" name=\"attributeType[]"+"\">"
                 + "<option value=\"text\" selected>Text</option>"
                 + "<option value=\"checkbox\">Checkbox</option>"
                 + "<option value=\"select-list\">Select Option List</option>"
                 + "<option value=\"notes\">Notes</option>"
                 + "</select>"
                 + "<div class=\"option\"></div>"
                 + "<button type=\"button\" class=\"remove\">Delete</button>"
                 + "</div>";

And

//Add action
    $("#attributes").on('click', '.btn', function () {
        add = "<div class=\"op\"><label for=\"attributeOption[]" +"\">Name:</label>" 
        + "<input class=\"option-input\" type=\"text\" name=\"attributeOption[]" + "\">"
        +"<button type=\"button\" class=\"remove-option\">remove</button></div>";
        $(this).after(add); 
        //COUNT NUMBER OF OPTIONS
        $opt = $(this).closest('.option')
        $opt.siblings('.attribute_count').val($opt.find('.op').length)
        alert($opt.siblings('.attribute_count').val());
    });

    //Remove input
    $("#attributes").on('click', '.remove-option', function () {
            $(this).closest('.op').remove();
            $opt = $(this).closest('.option')
            $opt.siblings('attribute_count').val($opt.find('.op').length)
    });