$(document).ready(function () {
    //add and remove vehicle fields
    var addButton = $('#add-dependant'); //Add button selector
    var wrapper = $('.added-dependants'); //Input field wrapper
    var x = 1;
    var fieldHTML = '<div class="">' +
        '<button type="button" id="remove-button"> <i class="fa fa-trash"></i> </button>' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Dependant Name <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="name[]" class="input-text-height" size="20" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Type <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="type[]" list="dependants" class="input-text-height" size="5" autocomplete="off">\n' +
        '       <datalist id="dependants">' +
        '           <option value="Spouse">' +
        '           <option value="Dependant">' +
        '       </datalist>' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Member Number <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="number[]" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Date of Birth(DoB) <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="date" name="dob[]" class="input-text-height" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">ID Number <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="id-no[]" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Gender <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="gender[]" list="genders" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Phone No. <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="phone[]" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Email <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="email[]" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Allergies <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="allergy[]" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Blood Group <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="blood-group[]" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Pre-Conditions <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="pre-conditions[]" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '<div class="guestDetails_input">\n' +
        '  <div class="guestDetails_inputLabel">Address <span class="error">*</span></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '       <input type="text" name="address[]" class="input-text-height" size="10" autocomplete="off">\n' +
        '    </div>\n' +
        '</div>\n' +
        '    <div class="guestDetails_inputDivider input_divider1"></div>';

    //Once add button is clicked
    $(addButton).click(function(){
        x++; //Increment field counter

        $(wrapper).append(fieldHTML); //Add field html

    });
    //Once remove button is clicked
    $(wrapper).on('click', '#remove-button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
