Adding non-required fields to form - php

Question

I am trying to add non-required fields but not sure how to add multiple strings. Adding one is fine but it stops working when I add multiple. Can anyone point out what I may be missing? Below is the code;
jQuery( '#appointment-popup' ).on( 'click', 'input.submit-appointment', function() {
values = {
'name' : '',
'phone' : '',
'email' : '',
'appointment-date' : '',
'approximate-time' : '',
'place' : '',
'additional-notes' : '',
'solutions' : ''
};
areErrors = false;
jQuery.each( values, function( key, value ) {
currentElement = jQuery( '#appointment-form-in-popup form *[name='+ key +']' );
values[key] = currentElement.val();
if( key != 'additional-notes' ) { // put here unrequired fields
if( values[key] != false ) { currentElement.removeClass( 'error' ); }
else {
currentElement.addClass( 'error' );
areErrors = true;
}
}
});
if( areErrors == false ) {
// your action here, for example sending an email...
jQuery.ajax({
url: path_to_template +'/_assets/submit.php',
data: { 'submit': 'appointment-form', 'data': values, 'email': appointment_contact },
type: 'post',
success: function( output ) {
// animation after your action
jQuery.appointmentFormAnimation();
}
});
}
});
jQuery.appointmentFormAnimation = function() {
formHeight = jQuery( '.appointment-popup-content' ).height();
jQuery( '.appointment-popup-content' ).css({ 'minHeight' : formHeight });
jQuery( '#appointment-form-in-popup form' ).fadeOut( 300 );
setTimeout( function() {
jQuery( '#appointment-form-in-popup .thanks' ).fadeIn( 300 );
}, 400 );
}