$(document).ready(function () {
    //add and remove vehicle fields
    var addButton = $('#add-vehicle'); //Add button selector
    var wrapper = $('.added-fields'); //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">Rate:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="rate[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">REG No.:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input  type="text"  name="reg-no[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Make:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input list="make" type="text" name="make[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '            <datalist id="make"> </datalist>\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Model:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input list="model" type="text" name="model[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Body:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input list="body" type="text" name="body[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '            <datalist id="body"></datalist>\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Color:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input list="color" type="text" name="color[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '            <datalist id="color"></datalist>\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Seats:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="seats[]" placeholder="Including Driver" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_inputDivider1 input_divider1"></div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Chassis:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="chassis[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Engine No.:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="engine[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Rating/Cc:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="rating[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">YoM:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="yom[]" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Windscreen Value:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="windscreen[]" value="0" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Radio Eqp. Value:<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="radio[]" value="0" size="13" class="input-text-height" autocomplete="off">\n' +
        '        </div>\n' +
        '    </div>\n' +
        '    <div class="guestDetails_input">\n' +
        '        <div class="guestDetails_inputLabel">Proposed Value(S.I):<span class="error">*</span></div>\n' +
        '        <div class="guestDetails_input">\n' +
        '            <input type="text" name="value[]" size="13" class="input-text-height" 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
    });
});
