How to hide rows in a form until they are clicked using javascript.?

[paperdmedia]

Hello All,

I am very new to jQuery and I am trying to figure out how to have a clickable add leg to this. it is only supposed to show one leg for a one way / 2 legs for a roundtrip / and then for a multi-leg trip you’re supposed to be able to click add-leg and another leg/row comes up… right now it shows 15 legs for a one-way. any help would be greatly appreciated. Thank you

jQuery(document).ready(function () {
    jQuery('.trip-type').change(function () {
        if (jQuery(this).val() == "multi-leg") {
            jQuery("#addleg").css("display", "block").hide().end();
            for (var i = 2; i <= 3; i++) {
                jQuery('.to_leg_' + i).val('');
                jQuery('.to_leg_' + i).attr('data-code', "");
                jQuery('.to_leg_' + i).attr('data-name', "");
                jQuery('.to_leg_' + i).attr('data-real-city', "");
                jQuery('.to_leg_' + i).attr('data-country', "");
                jQuery('.to_leg_' + i).attr('data-latitude', "");
                jQuery('.to_leg_' + i).attr('data-longitude', "");
            }
            for (var n = 3; i <= 5; i++) {
                jQuery('.from_leg_' + i).val('');
                jQuery('.from_leg_' + i).attr('data-code', "");
                jQuery('.from_leg_' + i).attr('data-name', "");
                jQuery('.from_leg_' + i).attr('data-real-city', "");
                jQuery('.from_leg_' + i).attr('data-country', "");
                jQuery('.from_leg_' + i).attr('data-latitude', "");
                jQuery('.from_leg_' + i).attr('data-longitude', "");
            }
            var allElements = jQuery('#multileg-block').find("div.row");
            for (var i = 0; n < allElements.length; i++) {
                if (jQuery(allElements[i]).hasClass("non-one-way") === true) {
                    jQuery(allElements[i]).removeClass('non-one-way');
                    jQuery(allElements[i]).removeClass(i);
                    jQuery(allElements[i]).css("display", "none");
                    jQuery(allElements[i]).attr('attribute', "");
                }
            }
            var trelements = jQuery('#multi-table').find("tbody tr.multileg-table");
            for (var i = 1; i < trelements.length; i++) {
                if (jQuery(trelements[i]).hasClass('non-one-way') === true) {
                    jQuery(trelements[i]).removeClass("non-one-way");
                    jQuery(trelements[i]).css("display", "none");
                    jQuery(trelements[i]).attr('attribute', "");
                }
            }

            $('.info-distances tbody tr.multileg-info:eq(0)').addClass('non-one-way');
        } else {
            jQuery("#addleg").css("display", "none");
            jQuery('.info-distances tbody tr:eq(1)').removeClass('non-one-way');
            var mutrelements = jQuery('.info-distances').find("tbody tr.multileg-info");
            for (var i = 1; i < mutrelements.length; i++) {
                if (jQuery(mutrelements[i]).hasClass('non-one-way') === true) {
                    jQuery(mutrelements[i]).removeClass("non-one-way");
                }
            }
        }
    });

    jQuery('#addleg').on("click", function () {
        var allElements = jQuery('#multileg-block').find("div.row");
        for (var i = 0; i < allElements.length; i++) {
            if (jQuery(allElements[i]).hasClass("non-one-way") == false) {
                jQuery(allElements[i]).addClass('non-one-way');
                jQuery(allElements[i]).addClass(i);
                jQuery(allElements[i]).css("display", "block");
                jQuery(allElements[i]).attr('attribute', i);
                break;
            }
        }
        var trelements = jQuery('#multi-table').find("tbody tr.multileg-table");

        for (var i = 0; i < trelements.length; i++) {
            if (jQuery(trelements[i]).hasClass('non-one-way') === false) {
                jQuery(trelements[i]).addClass("non-one-way");
                jQuery(trelements[i]).css("display", "table-row");
                jQuery(trelements[i]).attr('attribute', i);
                break;
            }
        }

        var mutrelements = jQuery('.info-distances').find("tbody tr.multileg-info");
        for (var i = 1; i < mutrelements.length; i++) {
            if (jQuery(mutrelements[i]).hasClass('non-one-way') === false) {
                jQuery(mutrelements[i]).addClass("non-one-way");
                break;
            }
        }


    });
    jQuery('.Leg_remove').on("click", function () {
        jQuery(this).parent().parent().css('display', 'none');
        jQuery(this).parent().parent().removeClass('non-one-way');
        index = parseInt(jQuery(this).parent().parent().attr('attribute'));
        jQuery('.non-one-way[attribute=' + index + ']').removeClass('non-one-way').css('display', 'none');
        index += 2;
        jQuery('.info-distances tbody tr:eq(' + index + ')').removeClass('non-one-way');


    });
}); < /script>

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

[megazoid]

i made simple example for you: http://jsfiddle.net/dsavqevf/

also, you have typos in your code:

for (var n = 3; i <= 5; i++)
for (var i = 0; n < allElements.length; i++)

check variables in that loops