SO - 25778722

by Arun P Johny

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<form id="form" method="post" action="">
    <select class="travellers">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <div class="form_Additional"></div>
    <input type="submit" class="button" value="Submit" />
</form>

JavaScript

jQuery(function ($) {
    var validator = $('#form').validate({
        debug: true,
        rules: {},
        messages: {}
    });


    $('select.travellers').attr('name', 'Number of travelers').on('click', function () {
        var travellers = this.value; //On change, grab value
        var dom = "";
        for (var i = 0; i < travellers; i++) { //for 0 is less than travellers
            dom += '<div><label>Full Name</label>';
            dom += '<input type="text" name="FullName_' + i + '" required>';
            dom += '<label>Food&nbsp;requirements</label>';
            dom += '<select size= "0" name="Food Requiries_' + i + '"  tabindex="-1"  >\
                      <option value="No pork">No pork</option>\
                      <option value="Halal">Halal</option>\
                      <option value="Food allergies">Food allergies</option>\
                      <option value="Other">Other</option></select></div>';
        }
        $('.form_Additional').html(dom); //add dom into web page
    });
});