自动增加名称字段并检查使用serialize发送的自动增量变量数

I have a button that the user presses to add more inputs. The reasoning behind this is to add additional 'guests'. The functionality of adding the inputs works fine. The part I can't figure out is how to auto increment the JS so that each new input adds an auto increment count to the name="guest".

I am serializing the data and sending it via AJAX to a php file. Is there also a way to program the variables, so it checks how many guests are being sent over, so I don't have guest1, guest2, guest3, etc. If I do this, there may be variables undefined.

Anyone have any ideas?

document.getElementById('guestWrap').innerHTML += '<div class="formField" id="guestName"><label class="label">What is your guest\'s name?</label><input type="text" class="input" name="guest" id="guest"></div>';

PHP

$guest1 = trim(htmlspecialchars($_POST['guest1'], ENT_QUOTES));
$guest2 = trim(htmlspecialchars($_POST['guest'], ENT_QUOTES));
$guest3 = trim(htmlspecialchars($_POST['guest'], ENT_QUOTES));

JS

$('#addGuest').click(function() {
    document.getElementById('guestWrap').innerHTML += '<div class="formField" id="guestName"><label class="label">What is your guest\'s name?</label><input type="text" class="input" name="guest" id="guest"></div>';
});

HTML - The first guest field, labeled as guest1

<div class="formField guestName" id="guestName">
    <label class="label">What is your guest's name?</label>
    <input type="text" class="input" name="guest1" id="guest1">
</div>

AJAX:

$('#rsvpForm').validate({
    rules: {
        name: {
            required: true,
            minlength: 2
        },
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        name: {
            required: "Please enter your name",
            minlength: "Your name seems a bit short, doesn't it?"
        },
        email: {
            required: "Please enter your email address",
            email: "Please enter a valid email address"
        }
    },
    submitHandler: function(form) {
       event.preventDefault();
        var datastring1 = $('#rsvpForm').serialize();

        $.ajax({
            url: 'rsvpSend.php',
            type: 'POST',
            data: datastring1
            ,
            success: function(data) {
                if (data == 'Error!') {
                    alert('Unable to  submit RSVP!');
                    alert(data);
                } else {
                /*  $('#application-form')[0].reset();
                    $('#application-form').slideUp(400);
                    $('#tell-us-title').fadeOut(200);
                    $('#make-it-count').fadeOut(200);
                    $('#inquiry-success').fadeIn(200);*/
                }
            },
            complete:function(){
                //$('body, html').animate({scrollTop:$('#inquiry-success').offset().top -25}, 'slow');
            },
            error: function(xhr, textStatus, errorThrown) {
                alert(textStatus + '|' + errorThrown);
            }
        });
    }
});

Full HTML

<form id="rsvpForm">
            <div class="formField">
                <label class="label"><span class="red"> *</span></label>
                <input type="radio" value="Yes" class="radio" name="yesno" id="yes">
                <label class="radioAnswer" for="yes">Yes</label>
                <input type="radio" value="No" class="radio" name="yesno" id="no">
                <label class="radioAnswer" for="no">NO</label>
            </div>
            <div class="formField" id="ansYes">
                <label class="label">Will you be bringing any guests?</label>
                <input type="radio" value="Yes" class="radio" name="yesno2" id="yes2">
                <label class="radioAnswer" for="yes2">Yes</label>
                <input type="radio" value="No" class="radio" name="yesno2" id="no2">
                <label class="radioAnswer" for="no2">NO</label>
            </div>
            <div id="guestWrap">
                <div class="formField guestName" id="guestName">
                    <label class="label">What is your guest's name?</label>
                    <input type="text" class="input" name="guest1" id="guest1">
                </div>
            </div>
            <div id="addGuest">
                <span class="guestIncrease">Add another guest</span>
            </div>
            <div class="formField">
                <label class="label">What is your name?<span class="red"> *</span></label>
                <input type="text" name="name" class="input">
            </div>
            <div class="formField">
                <label class="label">What is your email?<span class="red"> *</span></label>
                <input type="email" name="email" class="input">
            </div>
            <input type="submit" value="Submit RSVP" id="submit">
        </form>

If you don't have a Remove guest button, then it is pretty straight forward.

On click of the add guest button, get the count of existing guests. Create the new guest element with the ID as count + 1.

$('#addGuest').click(function() {
    var count = $('.formField.guestName').length;
    document.getElementById('guestWrap').innerHTML += '<div class="formField guestName" id="guestName' + (count + 1) + '"><label class="label">What is your guest\'s name?</label><input type="text" class="input" name="guest' + (count + 1) + '" id="guest' + (count + 1) + '"></div>';
});

Please note that all the guest divs must have class formField and guestName assigned for this code to work correctly. If you've any other criteria, you should modify the selector to get the count.