how to dynamically add/remove multiple divs using jquery

Question

In advance, I apologize if one of the other posts contained my answer. However, I DID review them, but perhaps my naiveté prevented me from completely understanding how to incorporate the posted code into my page. In any case, I would sincerely appreciate some help.

I am trying to build an rsvp webpage. The user selects how many guests will attend, and then enters each guest's name into the textboxes that appear (please see the jsfiddle example). My problem is that each div contains the same variable one the loaded webpage, so when the user clicks "submit" any particular variable thats listed more than once on the page is also submitted.

What I would like to do is have each individual DIV added and/or subtracted based on the number of guests that the user chooses. For example, when the user chooses "9" guests, all the divs are added in order, but if they change their mind and choose "7", then DIV 8 and DIV 9 disappear.

This is an example of what I am trying to accomplish: http://jsfiddle.net/3SvC7/11/

Here's an exerpt of my code, but please see the entire example at jsfiddle!

$(function() {

        $('#guestnum').change(function() {
            $('.g1').slideUp("slow");
            $('.g2').slideUp("slow");
            $('.g3').slideUp("slow");
            $('.g4').slideUp("slow");
            $('.g5').slideUp("slow");
            $('.g6').slideUp("slow");
            $('.g7').slideUp("slow");
            $('.g8').slideUp("slow");
            $('.g9').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });
$(function() {

        $('#accept').change(function() {
            $('.no').slideUp("slow");
            $('.yes').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });

        $('#decline').change(function() {
            $('.no').slideUp("slow");
            $('.yes').slideUp("slow");
            $('#' + $(this).val()).slideDown("slow");
        });
    });

Anybody think they can help? Thanks in advance!

Answer 1

Check out this fiddle: http://jsfiddle.net/3SvC7/19/

Is that sort of what you are going for?

var shown = 0;
$(function () {
    $('#guestnum').change(function () {
        // Get the amount to show
        var num = parseInt($('#guestnum').val());

        // Less than we need, add rows
        if (shown < num) {
            for (var i=shown; i <= num; i++) {
                $('#g'+i.toString()).slideDown();
            }
            shown = num;
        }

        // More than we need, remove rows
        if (shown > num) {
            for (var i=shown; i > num; i--) {
                $('#g'+i.toString()).slideUp();
            }
            shown = num;
        }
    });
});

This function does the dynamic hiding. Note that I've put each guest line into a div with an ID of the form g1, g2 etc. so we can index it in the loops and there is only one copy of each. The dropdown values are also now the numbers themselves so we can parse it to an int.

Answer 2

Try the below fiddle..I have edited a little bit of html,so that it might work for any number of guests.Rather than using the code statically,it might be better to use it dynamically,cause it might reduce the amount of code.I have integrated that html part in the js.Really made a rough sketch for you.Hope this might help u in some ways..Check if this is want mate .. :)

Fiddle

http://jsfiddle.net/x33ek/